tabindex conflict between Alertify and bootstrap 4 modal

Question

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!

I will be appreciated for any support!

Answer 1

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!");
            }
        });