javascripthtmljquerybootstrap-4alertify

tabindex conflict between Alertify and bootstrap 4 modal


I'm calling an Alertify Confirmation dialog while running a Bootstrap 4 Modal, and the problem is that the tab focus is not working in the first, while it is stucking in the last.

I believe it is something to do with the "tabindex=-1" which is added to the modal class Div based on Bootstrap 4 standards, so I've tried more than one concept trying resolving the problem, and still not working...

One of the concepts that I've thought will work was to toggle the "tabindex=-1" from the "modal" class div elements during the Alertify onshow and onclose events, and still not working!

    let mymessage = "Update entry?";   
    alertify.confirm().set({title: "Confirm!"})
        .set({labels: {ok:"Yes", cancel:"No"}})
        .set("defaultFocus", "ok");
        .set({onshow:function(){$(".modal").attr("tabindex","-2");}})
        .set({onclose:function(){$(".modal").attr("tabindex","-1");}}); 
    // Show confirmation message
    alertify.confirm(mymessage, function(e){
            if(e){
                editRow();
            } else {
                alertify.notify("Entry update has been canceled!");
            }
        }).bringToFront(); 

Take a look at the tab sequence is still in the Modal Div while it is missing from the Alertify Confirmation dialog!

Take a look at the tab sequence is still in the Modal Div while it is missing from the Alertify Confirmation dialog!

I will be appreciated for any support!


Solution

  • The following code resolves the issue:

        let mymessage = "Update entry?";   
        // custom OK and Cancel label to Yes and No
        alertify.confirm().set({title: "Confirm!"})
            .set({labels: {ok:"Yes", cancel:"No"}})
            .set("defaultFocus", "ok")
            .set({onshow:function(){$(".modal").removeAttr("tabindex");}})
            .set({onclose:function(){$(".modal").attr("tabindex","-1");                            
            }}); 
        // Show confirmation message
        alertify.confirm(mymessage, function(e){
                if(e){
                    editRow();
                } else {
                    alertify.notify("Editing entry has been canceled!");
                }
            });