kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Merge pull request #18638 from twbs/fix-18365 

Modal: Ignore spurious focus event that Firefox fires at document when switching back to its tab
This commit is contained in:
Chris Rebert 2015-12-24 08:15:27 -07:00
parent e2bf1e9fae d12ed5520e
commit d30310feae
2 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/src/modal.js
View File

@ -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()
}
})

43
js/tests/visual/modal.html
View File

@ -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>