How can I unfocus the modal trigger button after closing the modal in bootstrap

Question

I can't seem to blur the button after closing the modal.

$('#exampleModal').on('hidden.bs.modal', function(e){
        $('button').blur();
    });

I've tried the above and it still doesn't seem to blur it. I've tried almost everything. The only solution is to set a timeout and blur it after the model finishes the hidden transition. Any better solution?

Answer 1

The focus back to the trigger element is set within the modal plugin using a .one() binding, which unfortunately cannot be unbound. The good news is we can do this:

$('#myModal').on('shown.bs.modal', function(e){
    $('#myModaltrigger').one('focus', function(e){$(this).blur();});
});

Where #myModaltrigger is the ID of the modal trigger button. The reason to use the .one() binding is so that the function to blur will be called only after the modal is shown. Once it hides, and the focus/blur happens, the button can be focused normally, like by tabbing to it, without it automatically blurring.

See this working example