react-component / react-component/slider
[Bug] Missing `mousedown` event bubbling after v10 upgrade
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.1k
- Forks
- 768
- Avg merge
- 11d 22h
- Merged PRs (30d)
- 5
Description
Current behaviour
Currently, when version 10.x of rc-slider is being used, the mousedown event when clicking the handles is not bubbling. This causes issues with other libraries, for example react-modal:
react-modal uses the mousedown event to decide whether the user started a mouse action in the modal or outside, which should close the modal: https://github.com/reactjs/react-modal/blob/master/src/components/ModalPortal.js#L306-L310. Without the bubbling, dragging the handle outside the modal component of react-modal will always trigger the modal close since the mouseup and click events are still bubbling.
Expected behaviour
The mousedown event should bubble so other handlers can work as they used to in preceding versions. Otherwise, the mouseup and click events should also be intercepted for the sake of consistency - this would be a breaking change though.
Steps to reproduce
- Watch the
mousedown,mouseupandclickevents. There are multiple ways to do this, for example the monitorEvents() function in the browser console. - Click and let go of the handle of the rc-slider component with < v10 of rc-slider.
- Observe the reported events.
- Repeat steps 1 - 3 with >= v10 of rc-slider
- Compare the reported events and notice the missing
mousedownevent.
You can use this prepared CodeSandbox to reproduce the bug.
Reported events with < v10 of rc-slider:

Reported events with >= v10 of rc-slider:

Hints
This stopPropagation() call likely causes the missing mousedown event.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/Marks/Mark.tsx around lines 33-35 and inspect the stopPropagation() call mentioned in the issue. Reproduce the event sequence in the linked CodeSandbox or with browser event monitoring, then verify that clicking a handle produces the expected mousedown, mouseup, and click bubbling behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100