event.stopPropagation() no longer stops propagation after removing jQuery

[lolmaus]

Hi!

I've built and am maintaining the ember-drag-sort addon which happens to be the only drag-n-drop addon in the Ember ecosystem with support for nested lists.

It's been working fine with jQuery. Demo: https://kaliber5.github.io/ember-drag-sort/

I've tried upgrading to Ember 3.8 without jQuery and discovered that event.stopPropagation() no longer stops propagation. As a result, events on child lists get overridden by events on parent lists, and reordering nested lists no longer works.

I've pushed the gen-1 branch which is based on no-jQuery Ember 3.8. Here are some of problematic spots:

• https://github.com/kaliber5/ember-drag-sort/blob/gen-1/addon/components/drag-sort-list.js#L103
• https://github.com/kaliber5/ember-drag-sort/blob/gen-1/addon/components/drag-sort-item.js#L152

(Note that in the latter spot I tried adding event.preventDefault() and return false which didn't help and might have made things even worse, so it might make sense removing those when you try.)

This looks like a regression in Ember to me, but I can't confirm it myself. Please help!

[lolmaus]

@chancancode Hi! What's going on there?

[chancancode]

@lolmaus I'm not sure yet, but I ran into the same issue with one of the built-in components, we just didn't notice it because the those haven't been running on CI without jquery, due to some config issues

[chancancode]

@simonihmig do you know if this is expected?

[chancancode]

I think at least part of the problem is that, the even is not technically "propagating" since it already propagated all the way to ember's root element at this point, so stopPropagation only prevents it from propagating further up from that point on. It would be reasonable for us to emulate this in the custom propagation code, however I'm not sure that there is a good way to do it since there is no DOM api for querying the internal stopPropagation flag on the event.

[chancancode]

cancelBubble getter may work 🤔

[simonihmig]

do you know if this is expected?

Hm, so as mentioned to @lolmaus in private, returning false should have prevented bubbling, as this is covered here:

ember.js/packages/@ember/-internals/views/lib/system/event_dispatcher.js

Line 359 in 8174b88

if (viewHandler(target, event) === false) {

. Not sure why this was not working, maybe some different issue.

Regarding .stopPropagation() it seems jQuery handled this for use, as we were relying on its custom event delegation support. (this seems to be the place where it happens: https://github.com/jquery/jquery/blob/fe5f04de8fde9c69ed48283b99280aa6df3795c7/src/event.js#L337). Not sure if it was ever explicitly documented, but as a user I would definitely expect this to work, and the jQuery implementation did support that, so I would say this can be seen as a bug in the no-jquery implementation IMHO. @rwjblue do you agree?

cancelBubble getter may work 🤔

Yes, that looks right, shouldn't be too hard then to fix, if we agree this needs to be fixed.

[chancancode]

Let's try to fix it! @simonihmig would you like to work on this? There is already a failing test that I "disabled" in #17847, but we should probably add more.

[chancancode]

I also briefly looked into the return false thing when I was debugging the failing test. IIRC, the actual handler function ended up being wrapped by some generic thing that always returned true for some reason.

[simonihmig]

@simonihmig would you like to work on this?

@chancancode sure, here's a PR: #17874 😀 /cc @lolmaus