react-component / react-component/slider

[Bug] Missing `mousedown` event bubbling after v10 upgrade

Open
#844 1 comment 2 reactions 0 assignees View on GitHub

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

  1. Watch the mousedown, mouseup and click events. There are multiple ways to do this, for example the monitorEvents() function in the browser console.
  2. Click and let go of the handle of the rc-slider component with < v10 of rc-slider.
  3. Observe the reported events.
  4. Repeat steps 1 - 3 with >= v10 of rc-slider
  5. Compare the reported events and notice the missing mousedown event.

You can use this prepared CodeSandbox to reproduce the bug.

Reported events with < v10 of rc-slider:
image

Reported events with >= v10 of rc-slider:
image

Hints

This stopPropagation() call likely causes the missing mousedown event.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.