Modal - Event bubbling on children breaks modal transition

[ghost]

Similar problem to:
#13157

A really super minor issue. I'm not sure if this is intended behaviour but if you focus a child element that has transition out then click the modal backdrop (or anywhere outside of the modal) to close it, the transition on the modal is instantaneous. It seems to be a similar issue as I found previously with the collapse plugin (referenced above). I tried for a few hours to work on a fix but figured it's probably better to log it here. I done a quick and dirty by removing any transitions from inputs inside the modal but obviously it'd be better if the event bubbling was handled in the JavaScript.

You can see what I mean on the demo:
http://getbootstrap.com/javascript/#modals

Click the "Launch demo modal" and tab through until you're focused on one of the links with the tooltip. Then click the modal backdrop. The strange thing is, if you click the backdrop quickly (short time between mouse down and up) the transition fails but if you click and hold then release it transitions correctly. Presumably this is because the focus shifts before the event is fired.

[hnrch02]

I cannot reproduce in Chrome 34.0.1847.92 beta on OS X 10.9.2, could you give us a little bit more info about your setup and maybe also a quick GIF/video demonstrating what exactly is happening? (Maybe take a look at LICEcap for the GIF).

[cvrebert]

@spotts-ce What OS and browser are you using? (And what versions thereof?)

[ghost]

Chrome public latest (33.0.1750.152) on OSX. Happens on any webkit browser. I was tracing the transition end event and it was being fired by the input/child element rather than the modal itself. I think it's because it's using .one(...) rather than .on(...) and checking the event target like the collapse does.

Here's a video using Quicktime (not the best quality as it's transcoded to 720p res):
https://selz.com/items/media/53367894a1416c061496d36e

First click is quick (standard click) and second is a longer click, long enough to allow the child element to blur (you can see it in the vid). You can see the difference in transition (first one doesn't, second does).

Like I say it's super minor but enough to annoy my OCD tendencies. I understand if you feel it's minor enough to ignore. When I get some time on Monday or tomorrow, I'll do some more digging into it.

[hnrch02]

I think it's because it's using .one(...) rather than .on(...) and checking the event target like the collapse does.

Could you point me to the code you are referring to here?

Also, I couldn't reproduce in Chrome Stable 33.0.1750.152 or Chrome Canary 35.0.1916.2. It did briefly happen in Canary though while it was updating an the animations were rather rough as it was the case in your video.

[ghost]

You have to be quick to get it to occur. The chain of events are:

1 - A transitioned element is given focus within the modal
2 - You click outside of the modal, bluring that child element
3 - Transition occurs on the child element. If you mouseup during this time, the transition end event will fire but the event target will be the child element rather than the modal.
4 - Transition doesn't happen.

Of course if you mouseup slower than the transition time on the child element, you won't notice it. Not sure how it'd work on a touch device. The issue will of course be more obvious if the transition time is extended on the child element as the window of time for the event mismatch will be widened.

https://github.com/twbs/bootstrap/blob/master/js/modal.js#L119

This will of course fire if a child element is also transitioned. The event will bubble up. I could be miles off but I think that's the cause. Obviously just changing it to .on(...) won't work, it will need some more work to check the event target like the collapse does:

https://github.com/twbs/bootstrap/blob/master/js/collapse.js#L100

I'll give Chrome 34 a go but as event bubbling is pretty stock standard, I'm not sure it'll help.

[hnrch02]

Can you confirm that applying this patch to tooltip.js fixes the problem (even though this is probably not the best solution)?

[ghost]

I'll check tomorrow. No doubt it would fix it for tooltips but the problem is it'll be any child element that'll cause the problem so the better way to fix it would be to check the event target in the handler itself. I'll have another look tomorrow if I get time although we have a big release to do :(

[mdo]

Is this fixed by #13176?

[hnrch02]

Nope, this should be unrelated to #13176. I'll submit a PR in a minute.

[fat]

closing as dupe of #13430