rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
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:35 -07:00
commit b0ec851f80
2 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/modal.js
View File

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

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

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