Modal hidden event #16604

Activity

1. twbs-lmvtfy commented on Jun 9, 2015

   

   twbs-lmvtfy

   on Jun 9, 2015

   More actions

   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.)
2. ray73864 commented on Jun 9, 2015

   

   ray73864

   on Jun 9, 2015

   Author

   More actions

   Revised example using Bootstrap 3.3.4 same issue:

   http://www.bootply.com/c7GmgLZx5H
3. kkirsche commented on Jun 9, 2015

   

   kkirsche

   on Jun 9, 2015

   Contributor

   More actions

   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
4. ray73864 commented on Jun 9, 2015

   

   ray73864

   on Jun 9, 2015

   Author

   More actions

   Hrmm, kind of wanted to avoid using a setTimeout, but if that is the only way then so be it.
5. kkirsche commented on Jun 9, 2015

   

   kkirsche

   on Jun 9, 2015

   Contributor

   More actions

   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.
6. cvrebert

   added

   jsJavaScript or TypeScript sources and pluginsJavaScript or TypeScript sources and plugins

   on Jun 9, 2015
7. cvrebert commented on Jun 9, 2015

   

   cvrebert

   on Jun 9, 2015

   Collaborator

   More actions

   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.
8. cvrebert

   closed this as completedon Jun 9, 2015
9. witheej commented on Jun 7, 2019

   

   witheej

   on Jun 7, 2019

   More actions

   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