bootstrap-modal.js requires tabindex="-1" for escape key to work in Chrome/FireFox?

[jdaigle]

It appears that in order for the escape key to work with bootstrap-modal.js in Chrome and FireFox, your modal div must contain the attribute tabindex="-1". The example in the documentation includes this attribute but you can reproduce the issue by removing the attribute from the example modal.

I can reproduce this in Chrome 21 and FireFox 15. Interestingly this is not an issue in IE 8/9.

If this requirement is not a bug, then I think it should be noted in the documentation.

[mchiocca]

Setting tabindex="-1" doesn't solve the problem on Opera 12.0.2. Modals still don't close when you hit the escape key.

[andrewdeandrade]

Hey @jdaigle,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[jdaigle]

@malandrew Here is an example: http://jsbin.com/welcome/28240

Click the button and press escape, and nothing happens. If you edit the source and include tabindex="-1" on the #myModal div, suddenly it works (if you pop out the output).

[jbutz]

@mchiocca In regards to the opera issue it seems that the keyup events that are in the escape function are not triggered in Opera when the escape key is pressed. However, keypress events are triggered.

That said, it seems the keypress events are not triggered in Chrome, but the keyup events are.

[fat]

yeah you need it.

[yuhaoboris]

i meet a problem.
i put a CKEditor into the modal DIV, then i click the upload image button in editor, and i found the input element can't input anything.

[mikew]

Same issue as @Borisyu, but with redactor. Removing tabindex="-1" solves it.

[adigourdi]

I just happened to encounter this issue, the problem is related to focus being lost to the body

• A sample modal with tabindex="-1" attribute, keeps the focus at the .modal element (document.activeElement returns the modal element)
• When the tabindex="-1" is removed, the modal can't be focused to since the tabindex attribute is what makes it "focusable", therefore the esc key is not captured, and the body element handles the keydown

[Volmarg]

I came here looking for solution where opening modal from within other modal is stealing focus when tabindex is -1, meanwhile i made my own solution to this problem as I use external package which uses tabindex.
Well i will just leave it here in case someone will have simillar case and no idea to fix that or make workaround:

export default(function(){
    window.bootbox_extension = {
        /**
         * When modal is being called from within bootbox it looses all the focus as bootbox has tabindex = -1
         */
        removeTabindexFromActiveModals: function(){
            let $allActiveBootboxesModals = $('.bootbox.modal');

            $allActiveBootboxesModals.each(function(index, modal){
               let $modal = $(modal);
               $modal.removeAttr('tabindex');
            });
        },
        /**
         * The removed tabindex should be restored otherwise it wont be closable by hitting ESC
         */
        restoreTabindexForActiveModals: function(){
            let $allActiveBootboxesModals = $('.bootbox.modal');

            $allActiveBootboxesModals.each(function(index, modal){
                let $modal = $(modal);
                $modal.attr('tabindex', '-1');
            });
        },
    }
}());