0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Hopefully a fix for #12364

* register the callback before invoking the toggling
* listen for `hidden` instead of `hide`
* account for the possibility of the associated `show` event being preventDefault-ed

Adds relevant unit tests.
This commit is contained in:
Chris Rebert 2014-05-19 01:25:52 -07:00
parent 7d75734e10
commit b058c018eb
2 changed files with 57 additions and 3 deletions

View File

@ -268,10 +268,13 @@
if ($this.is('a')) e.preventDefault() if ($this.is('a')) e.preventDefault()
Plugin.call($target, option, this) $target.one('show.bs.modal', function (showEvent) {
$target.one('hide.bs.modal', function () { if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$this.is(':visible') && $this.trigger('focus') $target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
}) })
Plugin.call($target, option, this)
}) })
}(jQuery); }(jQuery);

View File

@ -201,4 +201,55 @@ $(function () {
div.remove() div.remove()
}) })
test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
.on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run
equal(document.activeElement, toggleBtn[0], 'toggling element is once again focused')
div.remove()
toggleBtn.remove()
start()
}, 0)
})
.on('shown.bs.modal', function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
})
test('should not restore focus to toggling element if the associated show event gets prevented', function () {
stop()
$.support.transition = false
var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
var otherBtn = $('<button id="other-btn">Golden boy</button>').appendTo('#qunit-fixture')
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
div
.one('show.bs.modal', function (e) {
e.preventDefault()
otherBtn.focus()
window.setTimeout(function () { // give the focus event from the previous line a chance to run
div.bootstrapModal('show')
}, 0)
})
.on('hidden.bs.modal', function () {
window.setTimeout(function () { // give the focus restoration callback a chance to run (except it shouldn't run in this case)
equal(document.activeElement, otherBtn[0], 'show was prevented, so focus should not have been restored to toggling element')
div.remove()
toggleBtn.remove()
otherBtn.remove()
start()
}, 0)
})
.on('shown.bs.modal', function () {
$('#close').click()
})
.appendTo('#qunit-fixture')
toggleBtn.click()
})
}) })