slider icon indicating copy to clipboard operation
slider copied to clipboard

About stopping event propagation of Slider under React v.17

Open Shad02w opened this issue 3 years ago • 0 comments

When calling stopPropagation of touch move event on parent will casing problems on Slider

Problem: Unable to change the value of Slider by touch move.

Code:

<div onTouchMove={(e) => e.stopPropagation()}>
    <Slider defaultValue={10} min={0} max={40}/>
</div>

As I know, Slider will add touch move and touch end event listener to document when touch start, this work totally fine before React 17.

However since React 17, React attach event listeners to root element instead of document, and calling stopPropagation on React's synthetic event will exactly stop event bubble from root element to document, therefore Slider will not work as expected.

I wonder if there are any way to solve this problem? Thank you

Shad02w avatar Jun 13 '21 20:06 Shad02w