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

element

3 files changed, 28 insertions, 2 deletions

diff --git a/js/src/collapse.js b/js/src/collapse.js
index 718630bd37..7d1ba4c54f 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 4470a18c27..9ecb60994f 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 1d61ef19c9..6b4e89bfb3 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>