Collapse: Using preventDefault() in show/hide events breaks collapse
Created by: RoToRa
By looking at the source code evidently the Collapse JavaScript component ist supposed to support canceling the functionality by calling preventDefault()
in an show or hide event handler (if (startEvent.isDefaultPrevented()) return
, line 105).
However doing this only cancels the collapse/expand partially, namely the action inside the transition
method. The actual collapsing/expanding happens after calling the transition
method (line 70, line 79) and thus is uneffected by the isDefaultPrevented()
check.
This leads to an undefined state of the collapse
element with the in
class set but height: 0
, or the in
not set and ´height: auto`, where it should be vice-versa. This again in turn causes the collapsing/expanding not to work anymore.
For a reproduction example see http://jsfiddle.net/qQv5S/ . Here a show and hide event handler ist applied to two collapse elements using jQuery's .one()
method. The handler only contains an alert (in oder to show when its being executed) and a preventDefault()
. Dispite the preventDefault()
the first click on the texts "Test 1" or "Test 2" still collapses/expands the elements. Furthermore any further clicks on the texts no longer expand/collapse the elements dispite the event handler no longer being executed anymore.