Merge pull request #18639 from twbs/v3-fix-18365

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

2 files changed, 46 insertions, 1 deletions

diff --git a/js/modal.js b/js/modal.js
index 5049cccf3..cba48507a 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -140,7 +140,9 @@
     $(document)
       .off('focusin.bs.modal') // guard against infinite focus loop
       .on('focusin.bs.modal', $.proxy(function (e) {
-        if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
+        if (document !== event.target &&
+            this.$element[0] !== e.target &&
+            !this.$element.has(e.target).length) {
           this.$element.trigger('focus')
         }
       }, this))
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 4342f0ce4..865511f97 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -127,12 +127,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>
@@ -149,12 +174,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>