Collapse animation jumps if an input field holds the focus

[anormal81]

I have two panels with forms and input fields. A button click triggers the collapsing of the first form and the expansion of the second one. The animation works fine if no input field has focus.

Try the example at http://jsfiddle.net/ZbAsN/1/
Set the cursor into the username text box an click the "create new user" button. The panel quickly jumps to the end position. Click "cancel" to return to the first panel.

Retry the same without focus in a text box. The animation will be executed as expected.

In addition: a slower click on the "create new user" button will transfer the focus to the button before the animation starts. The result looks like the expected behaviour.

[fat]

oh yeah it's catchin the wrong transition end… interesting

[zlatanvasovic]

@anormal81 You can't use collapse animation when an element is focused. When you click on a collapse button — it's focus — and one focus breaks another focus.

Fix: avoid clicking on collapse button when another element is focused.

[zlatanvasovic]

@fat Hey, any news? 👯

[fat]

the fix is to check that the target is the collapsing element. i'll fix this now

[vsn4ik]

After fix issue, example code not work correct (collapse not work). I used data-target attribute.

http://jsfiddle.net/SJ7Ug
Reproduce issue:

1. Focuse input (if unfocused) in panel-body 1.
2. Click on panel 1 heading link to collapse.
3. Click again on panel 1 heading link (collapse not work).

[vsn4ik]

Fixed after #13330.