Merge pull request #18638 from twbs/fix-18365

Modal: Ignore spurious focus event that Firefox fires at document when switching back to its tab

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">&times;</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 &lt;body&gt; 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>