[BUG]When using the drag gesture and calling stopPropagation inside onPointerUp, the scroll element starts following the cursor.

[f4-daichi-tomonaga]

1. Read the FAQs 👇

2. Describe the bug

When using the drag gesture and calling stopPropagation() inside onPointerUp of the motion.div's children,
the scroll element starts following the cursor.

When you click again, the scroll element detaches.

<motion.div
drag={"y"}
style={{ height: "300px", overflow: "hidden", width: "100px" }}
dragConstraints={{ top: 0, bottom: 200 }}
>
    <div
      onPointerUp={(event: React.PointerEvent<HTMLElement>) => {
        event.stopPropagation();
      }}
      style={{ backgroundColor: "lightcoral" }}
    >
      Button
    </div>
</motion.div>

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

bug example（calling stopPropagation() inside onPointerUp）
https://codesandbox.io/p/sandbox/test-drag-framermotion-lr274f

normal example
https://codesandbox.io/p/sandbox/test-drag-framermotion-forked-nypn38

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to the bug example CodeSandBox
2. Drag a button
3. Confirm that a bug has occurred

5. Expected behavior

scroll elements should not follow the cursor after the drag ends.

Is this a bug?
Or is there a workaround?

Looking forward to your response, thank you!

[jameslegoff92]

Hi f4-daichi-tomonaga,

Thanks for supplying the code sandbox highlighting the issue. Can you explain the scenario you're trying to create where calling event.stopPropagation() inside the onPointerUp event handler is necessary?

[f4-daichi-tomonaga]

@jameslegoff92
thank you for your response!

I will explain the current situation in detail.

=====================

I'm currently developing a mobile app using React and Framer Motion.

And, I created a scroller and implemented a modal that opened when a button inside it was pressed.
An issue occurred where, after opening a modal, if you touched the screen, the scroller behind it would move only once.

Upon further investigation, I found that the action of opening the modal was not related to the defect, but was caused by the action of pressing the button before it.

2024-09-10.11.16.06.mov

The button uses Pointer events, and I found that the reproduction of the problem changes depending on whether onPointerUp has stopPropagation.

There is a possibility of setting up another event handler between the button and the scroller.
If possible, I would like to resolve the problem without changing the current implementation.

I appreciate any guidance you can provide.

[SaeWooKKang]

dragging is activated on pointDown and deactivated on pointUp. However, when event propagation is stopped at pointUp, the system continues to recognize it as being in a 'dragging' state. In my opinion, maintaining the drag state when event propagation is blocked is the correct behavior.