diff options
| -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 d40885020..202c5fe94 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 2e2f6eb63..7e54f7aa2 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> |