Pressing the escape key on an open Select2 dropdown shouldn't close Bootstrap modal

Question

Using Twitter Bootstrap 3, a Select2 dropdown is embedded within a modal.
Now when pressing the escape key on such an opened Select2 element both the dropdown and the modal dialog are getting closed immediately.

How can I prevent the modal to be closed in such a case?
However, it's fine to close the modal when pressing the escape key in case the current focused dropdown is closed . Therefore in the above described situation it would need two escape key presses: The first which closes the dropdown and a second one which close the modal.

I prepared a jsfiddle to easily reproduce the behaviour http://jsfiddle.net/a82RX/ .
(I used the same modal like in the bootstrap documentation with a very simple select2 dropdown.)

I already tried to interfere and cancel the closing of the modal by listening on the

  select2-close

event, with no success.

Answer 1

Use

  $('#myModal').modal({keyboard:false});

Refer http://getbootstrap.com/javascript/#modals-usage

Complete Solution:

HTML

<button class="btn btn-primary btn-lg" id="modalLaunch">Launch demo modal</button>

Script:

$(function() {
    $("#e1").select2();
    $("#modalLaunch").click(function() {
        $('#myModal').modal({
            show:true,
            keyboard:false,
            backdrop:'static'
        });
    });
});

Answer 2

I came across this sort of a situation too and I found a solution for this problem. It is a combination of different ideas.

1) When showing modal, set keyboard to false. Code is exactly what @ravimallya has provided.

2) Listen to the 'esc' keyup event. (I guess you can also listen to keydown/keypress event but I went with keyup)

var ESCAPE_KEY = 27;
$('#myModal').on('keyup', function (event) {
    if (event.which === ESCAPE_KEY) {
        $('#myModal').modal('hide');
    }
});

3) [Bonus] I have also implemented double escape to close modal functionality, which was not so obvious so decided to share it with everyone. Basically when the focus is on the select2 and the dropdown is open, when you press 'Esc', the select2 dropdown closes. However if you press 'Esc' again, nothing happens. While the behavior of the second 'Esc' is correct, I would prefer it to close the modal. So here is my code implementation of it:

$('#mySelect').select2();
var mySelectContainer = $(mySelect).data('select2').container;
$(mySelectContainer).on('keyup', function (event) {
    if (event.which === KeyCodes.Escape) {
        $('#myModal').modal('hide');
    }
});

The reason why listening to select2-close event doesn't work is because the modal's keyup (or something like it) handler triggers immediately after an 'esc' has occurred.

Btw, if you happen to find yourself subscribing to a lot of keyup/keydown/keypress events, you might want to check out JQuery HotKeys . And if you are already using it, then the above solution looks like the following:

$('#myModal').on('keyup', null, 'esc', function () {
    $('#myModal').modal('hide');
});

Answer 3

This answer is quite late but I thought I would still post my solution here since I had the same problem today. My select2 dropdown closed the modal when you tried closing the open dropdown with the escape key. To solve this behavior I added an event listener wich checks if an escape key gets pressed on the open dropdown. If yes it shoud stop the Propagation and close the dropdown with the select2.('close') method.

 $(document).on('select2:open', () => {

    window.addEventListener('keydown', function (e) {
        let dropdown = $('.select2-hidden-accessible');
        if ((e.key === 'Escape' || e.key === 'Esc') && $('.select2-container--open').length) {
            e.stopPropagation();
            dropdown.select2('close');
            return false;
        }
    }, true);
});