diff options
| -rw-r--r-- | js/src/collapse.js | 3 | ||||
| -rw-r--r-- | js/tests/unit/collapse.js | 25 | ||||
| -rw-r--r-- | js/tests/visual/collapse.html | 2 |
3 files changed, 28 insertions, 2 deletions
diff --git a/js/src/collapse.js b/js/src/collapse.js index 718630bd3..7d1ba4c54 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -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() } diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index 4470a18c2..9ecb60994 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -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')) + }) }) diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html index 1d61ef19c..6b4e89bfb 100644 --- a/js/tests/visual/collapse.html +++ b/js/tests/visual/collapse.html @@ -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> |