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

Collapse - preventDefault only on <a> elements not inside the collapsible

element
This commit is contained in:
Johann-S 2017-08-25 10:14:18 +02:00
parent 4571ab0e57
commit 5a90b4aa3e
3 changed files with 28 additions and 2 deletions

View File

@ -361,7 +361,8 @@ const Collapse = (($) => {
*/
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
if (!/input|textarea/i.test(event.target.tagName)) {
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
if (event.target.tagName === 'A' && !$.contains(this, event.target)) {
event.preventDefault()
}

View File

@ -673,4 +673,29 @@ $(function () {
})
$trigger3.trigger('click')
})
QUnit.test('should not prevent interactions inside the collapse element', function (assert) {
assert.expect(2)
var done = assert.async()
var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture')
var htmlCollapse =
'<div id="collapsediv1" class="collapse">' +
' <input type="checkbox" id="testCheckbox" />' +
'</div>'
$(htmlCollapse)
.appendTo('#qunit-fixture')
.on('shown.bs.collapse', function () {
assert.ok($target.prop('checked'), '$trigger is checked')
var $testCheckbox = $('#testCheckbox')
$testCheckbox.trigger($.Event('click'))
setTimeout(function () {
assert.ok($testCheckbox.prop('checked'), '$testCheckbox is checked too')
done()
}, 5)
})
$target.trigger($.Event('click'))
})
})

View File

@ -57,7 +57,7 @@
</div>
</div>
<script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../dist/util.js"></script>
<script src="../../dist/collapse.js"></script>
</body>