Event bubbling due to nested components - how to stop propagation?

[rfmiotto]

Hi there,

I am working on a project in which I am facing a problem with event bubbling. I have 2 nested components, each containing their own gesture handlers and I am trying to cancel the event coming from the parent component when the user clicks and drags the inner component.

Minimal project reproducing the issue

To better understand the problem I'm facing, I create a minimal NextJS project on StackBlitz.

Related material

I looked at a few Q&A on the web related to this issue (like here, here, here and here for example), but I still couldn't figure it out how to cancel propagation from the parent.

When used along with react-spring, it is possible to pass an immediate: true property which seems to do the trick (see here). I'm not sure about that, but anyway, I'm not using any animation libraries in my project.

According to Mozilla and to react-gesture docs, we could cancel events coming from a parent listener by using the event options (capturing). Maybe I didn't understand it correctly, because my attempts didn't work.

Thanks in advance for any help you can offer.

[dbismut]

Before I dive into the specifics of this question, a few things regarding the code you've provided.

1. you're using createRef and not useRef. createRef creates a new ref on each render, which is certainly not what you want. In my experience, createRef is mainly used when you need to create a list of refs inside useMemo for example.

2. In most situations, it's simpler to just use the spread API as in const bind = useGesture(...) and <div {...bind()} /> rather than a ref and a target. You might need refs when you need to run event.preventDefault() as it requires to set eventOptions.passive = false which is not supported by React handlers, but in your case that's irrelevant.

3. You were running const useGesture = createUseGesture([dragAction]) inside each component render cycle. This results in creating a new gesture hook on every render. You can just move that line out of the component inside the main body of your js file. Also if you're going to reuse that hook, just write it once and import it where you need it. Note that in your situation you only need useDrag.

Now regarding your issue.

• eventOptions.capture = true in both handlers is not what you need: capturing is used when you want your parent events to take precedence over your children's. In your case, the <List /> is a child of your <main /> node and you want to event.stopPropagation() when the user interacts with the <List /> so that the handler bound to your <main /> node doesn't trigger. So event listeners should fire on <List /> first and then on <main />. This is the natural bubbling order so you don't need to toggle capturing.

• you've added the delay option to both handlers, I'm not sure why. If this is deliberate let me know, but in that case it could potentially break things indeed.

• the problem you're facing is related to using the threshold and filterTaps option (filterTaps creates a threshold of [3, 3] under the hood). When threshold is enabled, your handler will only fire when the threshold is reached. Effectively that means that the first events before the threshold is reached are going to be ignored. But to make stopPropagation work properly you need to fire it on onPointerDown, which is indeed ignored. I've seen that you've tried adding stop propagation inside an onTouchStart handler but that would only work on mobile devices, and since the lib uses PointerEvents by default it wouldn't work anyway.

• Fortunately the lib exposes an option called triggerAllEvents that passes all events to the handler, even before the gesture is actually triggered. That requires using the active flag in your handler logic (you were already using it so I left it there), but then you can stop propagation effectively from your <List /> component to your <main /> node.

Working sandbox: https://stackblitz.com/edit/nextjs-wzecdq?file=pages%2Findex.js

[dbismut]

Interesting... Here's a working sandbox using {...bind()} https://stackblitz.com/edit/nextjs-p2z7cn?file=pages%2Findex.js

The difference is that I'm using the bind on both elements (<List /> component and <main /> node), when previously I was only using the bind on <List />.

React actually attaches event to the root node, not to the actual element itself. It has its own delegation system. This means that when using a mix of the two in my previous sandbox (that I hadn't tested after I removed ref), <List /> had events attached to the root node, and the <main /> attached to... well the <main /> node, but which is in fact a children of the root node, so the events weren't bubbling as expected.

Hope that clarifies it a bit, I'm actually quite happy that I run into this now as I had never experienced it before... So thanks for the heads up!

[rfmiotto]

Fantastic explanation!
Thank you again, and please keep up with this amazing work!

All the best

[rfmiotto]

Hi @dbismut,

Can I bother you again with one more question?

The solution you proposed for the bubbling order worked perfectly! By stopping the propagation from the parent component, we were able to make to fire only one event when clicking on the list of cards and dragging - it chances the group of cards (its color), but keeps the same selected card.

Now, I am trying to make the cards clickable. I wanna keep the same behavior as before but also allow the user to select one of the cards by clicking on them (in addition to dragging the white region). The problem is that now, the stopPropagation is not allowing the onClick event from the cards to be triggered.

Do you know how to solve this?

I made a few (unsuccessful) attempts in the following sandbox:
https://stackblitz.com/edit/nextjs-45dto3?file=components/List.jsx

In this project, I first tried to fire stopPropagation only if is not a tap (I have filterTaps activated), but it didn't work. What happens is that tap can only be true when the type of event is "pointerup". Things like:

if (type !== 'pointerup') event.stopPropagation(); // does not allow click

if (type == 'pointermove') event.stopPropagation(); // allows selected card to change when dragging the list

didn't work.

Then, I tried to stop propagating only if the motion is intentional (if drag pass the threshold), but it didn't work either. Actually, in this last attempt, the onClick event is fired, but the event from the parent component propagates as if there was no stopPropagation.

According to the doc triggerAllEvents ignores threshold. So, does that mean that, since I'm calling stopPropagation after a threshold (intentional option), this event is ignored?
I added a console.log() right after the stopPropagation and the message is being logged, but it seems that the EVENT is not being fired. If my interpretation is correct, it explains why my second approach with intentional didn't work. But whether right or wrong, I couldn't find a workaround for this problem.

As a final attempt, I saved the event during pointerdown, and on pointerup (if it is a tap gesture), dispatched the event on the target. With that, we could keep the stopPropagation as before.

if (type == 'pointerdown') {
  e = event;
}
if (tap) {
  console.log(target.dispatchEvent(e));
}

event.stopPropagation();

However, I get this error:

TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.

I greatly appreciate any help you can offer.

[dbismut]

Nested filterTaps don't play nice together.
This should work as expected: https://stackblitz.com/edit/nextjs-hugf7z

Note that I'm really not convinced the structure of your elements is relevant. Not sure what you're trying to achieve here, but that doesn't seem like ok to me atm.

[rfmiotto]

Wow. Many thanks!
It was way simpler than I thought. Good to know that nested taps don't play well. I will avoid them in the future.

In fact, there are easier (and probably better) ways to write the UI for this example. However, here, I've tried to be as faithful as possible to what happens in the project I'm working on.

Now the gestures are working as expected. Thank you very much.