Collapse: show event fires even though show is prevented because other element is transitioning
Created by: jkrehm
I just noticed that if you click fast enough (within the 350 millisecond transition window) you can open two panels at once. I did this accidentally, not trying to troll my own application. The issue was previously resolved via #2941 (closed) and works well in 2.3.2, but was re-broken in 3.0 because the .in
class is not added until the transition completes (as opposed to 2.3.2 where it's added immediately). You can observe the behavior on Bootstrap's document site. Expand the third pane then click panes 2 & 1 quickly. Panes 1 & 2 will open.
The straight-forward fix is pretty simple, I think. Instead of only checking for the .in
class for "actives", check for .in
and .collapsing
, e.g.
var actives = this.$parent && this.$parent.find('> .panel > .in, > .panel > .collapsing')
However, if that's the only change made, the "show" event is still triggered for the element, even though it's not going to continue to the end. So anything listening for the "show" event (e.g. something to toggle an icon or background color) will fire erroneously. Commit 13cad506 made the event trigger before both this check and the isDefaultPrevented
check, so I'm guessing the author had a reason, but I don't know what it is, so don't want to submit a pull request.
I'm using Chrome 38 on Mac OS Yosemite to test this. Let me know what other information might be useful.