2

I am using Twitter Bootstrap for modal dialogs: http://twitter.github.com/bootstrap/javascript.html#modals (bootstrap-modal.js).

When I hit "esc", the modal closes, as expected. However, as you can see from the example on that page, the cursor is then missing. The user has to click on the browser window to put it back in focus.

This is an issue for me, because I have a site that's primarily driven by keyboard shortcuts. As a result, once the modal dialog is closed, the user will hit a certain keys expecting something to happen, but it won't work. He/she first will have to click in the browser window for the keyboard shortcuts to work again.

I've tried calling $('body').focus() after the modal is hidden (i.e. after $('#modalDiv').modal('hide');, but that does not change anything.

Any ideas?

tonic
  • 453
  • 1
  • 6
  • 21

3 Answers3

2

It's a tough issue

A likely success workaround can based on delaying focus trigger

$("#your-modal").on("hidden.bs.modal",function(e){
   setTimeout(function(){
      $('#input-to-focus').focus();         
   },300);  
});`
David Canós
  • 1,806
  • 18
  • 19
  • I think this works because it waits till bootstrap returns focus to the trigger before applying the focus. Don't have to wait for 300ms though. – Pnar Sbi Wer Nov 09 '16 at 06:56
1

Try using the hidden event:

$('body').on('hidden', '.modal', function (e) {
  e && e.delegateTarget.focus();
});

JSFiddle

merv
  • 67,214
  • 13
  • 180
  • 245
  • hm, that's not working. i put a console.log("modal hidden!") line in there, but nothing is shown. i tried changing ".modal" to the name of .modalDiv, but still no luck. will read up on the hidden event to try a bit more. – tonic Aug 05 '12 at 19:06
  • thank you for the jsfiddle! should i be seeing the cursor after hitting "esc" on the modal? because even in the jsfiddle, the cursor is not returned (which leads me to believe that focus is not returned). again, this is only on "esc" (the buttons work fine). in my code, i ran your function ride after i call `$('#modalDiv').modal('hide');` – tonic Aug 05 '12 at 20:46
  • @tonic You should add the `hidden` listener on document load, not inside another (user event) listener, and certainly not *after* the event that you want to listen to. Also, why would *you* be calling `modal('hide')` in the first place? The Bootstrap modal already has keyboard **esc** closing built in. Maybe your phrasing is just confusing me. o_O – merv Aug 05 '12 at 22:34
  • apologies. you're right, the event fires (confirmed with a console.log), but focus is not returned to the document. the keyboard shortcuts do not work until the user clicks somewhere in the browser window. the reason i'm calling modal('hide') in the first place is because after clicking the primary button, i call a function to update some things and then i need to hide the modal afterward. – tonic Aug 06 '12 at 12:50
0

See this comment as well:

https://github.com/twitter/bootstrap/issues/2130#issuecomment-7664836

Kavin Mehta
  • 810
  • 10
  • 18