diff options
author | Chris Rebert <github@chrisrebert.com> | 2015-12-24 18:15:27 +0300 |
---|---|---|
committer | Chris Rebert <github@chrisrebert.com> | 2015-12-24 18:15:27 +0300 |
commit | d30310feae9129c35136fb91c7fc8bdf95fea47d (patch) | |
tree | c4a82d9b0513662ee7a632303969e7e1b0fb6a7d /js | |
parent | e2bf1e9fae99f860a0a27e92b0c9f65a2d72cb4a (diff) | |
parent | d12ed5520e5501207baf8089a5f1711cd06d863d (diff) |
Merge pull request #18638 from twbs/fix-18365
Modal: Ignore spurious focus event that Firefox fires at document when switching back to its tab
Diffstat (limited to 'js')
-rw-r--r-- | js/src/modal.js | 5 | ||||
-rw-r--r-- | js/tests/visual/modal.html | 43 |
2 files changed, 46 insertions, 2 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index d408850201..202c5fe94c 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -259,8 +259,9 @@ const Modal = (($) => { $(document) .off(Event.FOCUSIN) // guard against infinite focus loop .on(Event.FOCUSIN, (event) => { - if (this._element !== event.target && - (!$(this._element).has(event.target).length)) { + if (document !== event.target && + this._element !== event.target && + (!$(this._element).has(event.target).length)) { this._element.focus() } }) diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 2e2f6eb637..7e54f7aa2d 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -119,12 +119,37 @@ </div> </div> + <div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="myModalLabel2">Modal Heading</h4> + </div> + <div class="modal-body"> + <ol> + <li>Ensure you're using Firefox.</li> + <li>Open a new tab and then switch back to this tab.</li> + <li>Click into this input: <input type="text" id="ff-bug-input"></li> + <li>Switch to the other tab and then back to this tab.</li> + </ol> + <p>Test result: <strong id="ff-bug-test-result"></strong></p> + </div> + </div> + </div> + </div> + <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <button id="tall-toggle" class="btn btn-default">Toggle tall <body> content</button> <br><br> + <button class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#myModal2"> + Launch Firefox bug test modal + </button> + (<a href="https://github.com/twbs/bootstrap/issues/18365">See Issue #18365</a>) + <br><br> <div id="tall" style="display: none;"> Tall body content to force the page to have a scrollbar. </div> @@ -147,12 +172,30 @@ <!-- JavaScript Test --> <script> +var firefoxTestDone = false +function reportFirefoxTestResult(result) { + if (!firefoxTestDone) { + $('#ff-bug-test-result') + .addClass(result ? 'text-success' : 'text-danger') + .text(result ? 'PASS' : 'FAIL') + } + firefoxTestDone = true +} + $(function () { $('.js-popover').popover() $('.js-tooltip').tooltip() $('#tall-toggle').click(function () { $('#tall').toggle() }) + $('#ff-bug-input').one('focus', function () { + $('#myModal2').on('focus', function () { + reportFirefoxTestResult(false) + }) + $('#ff-bug-input').on('focus', function () { + reportFirefoxTestResult(true) + }) + }) }) </script> |