Don't fire show event if show is prevented because other element is s…

…till transitioning Fixes #14844. Closes #14845.
twbs · Oct 22, 2014 · e811a24 · e811a24
1 parent a096c3f
commit e811a24
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/js/collapse.js b/js/collapse.js
@@ -38,17 +38,21 @@
   Collapse.prototype.show = function () {
     if (this.transitioning || this.$element.hasClass('in')) return
 
+    var activesData
+    var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
+
+    if (actives && actives.length) {
+      activesData = actives.data('bs.collapse')
+      if (activesData && activesData.transitioning) return
+    }
+
     var startEvent = $.Event('show.bs.collapse')
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
-
     if (actives && actives.length) {
-      var hasData = actives.data('bs.collapse')
-      if (hasData && hasData.transitioning) return
       Plugin.call(actives, 'hide')
-      hasData || actives.data('bs.collapse', null)
+      activesData || actives.data('bs.collapse', null)
     }
 
     var dimension = this.dimension()

diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
@@ -263,4 +263,39 @@ $(function () {
     $target3.click()
   })
 
+  test('should not fire show event if show is prevented because other element is still transitioning', function () {
+    stop()
+
+    var accordionHTML = '<div id="accordion">'
+        + '<div class="panel"/>'
+        + '<div class="panel"/>'
+        + '</div>'
+    var showFired = false
+    var $groups   = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
+
+    var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+
+    $('<div id="body1" class="collapse"/>')
+      .appendTo($groups.eq(0))
+      .on('show.bs.collapse', function () {
+        showFired = true
+      })
+
+    var $target2 = $('<a data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
+    var $body2   = $('<div id="body2" class="collapse"/>').appendTo($groups.eq(1))
+
+    $target2.click()
+
+    $body2
+      .toggleClass('in collapsing')
+      .data('bs.collapse').transitioning = 1
+
+    $target1.click()
+
+    setTimeout(function () {
+      ok(!showFired, 'show event didn\'t fire')
+      start()
+    }, 1)
+  })
+
 })