Modal hidden event

[ray73864]

Not sure what I'm doing wrong here, have managed to turn my issue into a simple example of what is going wrong at:

http://www.bootply.com/BzXT9pgtO7

Basically I'm trying to get it so that when a modal closes the hidden.bs.modal event sends the focus back to an input box on the page. I'm sure I've had this working before but cannot work out where I have gone wrong.

If I tell the hidden event to instead just put a value into the input box it shows up, I just can't get it to focus, I'm thinking it's a timing issue but then that's why I'm using the 'hidden' event as opposed to the 'hide' event.

[twbs-lmvtfy]

Hi @ray73864!

You appear to have posted a live example (http://s.bootply.com/render/BzXT9pgtO7), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 9, column 9: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.3.1
• line 71, column 9: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.3.1

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[ray73864]

Revised example using Bootstrap 3.3.4 same issue:

http://www.bootply.com/c7GmgLZx5H

[kkirsche]

Wrapping it in a setTimeout with a time of 1 ms fixes it.

setTimeout(function() {
    $("#txtInput").focus();
}, 1);

See: http://www.bootply.com/hsCP97LMhZ

EDIT: apparently this also works with a time of 0. It seems when you apply setTimeout with a delay of 0, you can be sure that the code you put in the delayed function is executed after the main processing is finished. See http://stackoverflow.com/questions/7046012/jquery-focus-on-input-field which discusses this

[ray73864]

Hrmm, kind of wanted to avoid using a setTimeout, but if that is the only way then so be it.

[kkirsche]

Understandable. I'm not sure it's the only way, but it seems to work to fix the issue even if you set a 0ms delay. For that reason you shouldn't actually slow down the application in any noticeable manner because you aren't actually delaying it.

[cvrebert]

For accessibility reasons, after hiding a modal, we refocus the button that was used to trigger the showing of the modal (see

bootstrap/js/modal.js

Line 331 in 6e8df2b

$this.is(':visible') && $this.trigger('focus')

).
I will make a note that we should try to better accommodate cases like yours in Bootstrap v4. For v3, short of modifying modal.js, I think only somewhat-hacky solutions are available.

[witheej]

The setTimeout workaround unfortunately does not solve the problem of IE throwing an error when it tries to refocus on an SVG that was clicked to trigger the modal (I'm using IE 11).

See: focus-trap/focus-trap-react#18