reach / reach-ui

The Accessible Foundation for React Apps and Design Systems
https://reacttraining.com/reach-ui/
MIT License
5.97k stars 560 forks source link

[slider] stuck in dragging mode when dragging two times in a row #806

Open mz8i opened 3 years ago

mz8i commented 3 years ago

🐛 Bug report

Current Behavior

The slider consistently gets into a stuck state when dragging with a mouse. A very specific sequence of interactions causes the bug:

  1. Drag the slider marker in any direction (note that the cursor doesn't change when dragging the slider normally)
  2. Release the slider marker.
  3. Hover over the marker again, making sure that the cursor is over the marker (the bug won't occur otherwise)
  4. Press and hold the mouse button to start dragging. Note that this time, the cursor icon changes to the dragging icon. However, as you keep holding the mouse button down and moving the cursor to move the slider marker, the marker doesn't actually move (against expectations)
  5. When you release the mouse button, then the marker gets "attached" to the mouse - it starts moving as you move the mouse, even though you're not pressing the mouse button any more
  6. You need to click the mouse button again to "unstuck" the slider.

Expected behavior

You can drag the slider marker, as in points 1-2 above, without any unexpected behaviour, no matter how many times consecutively the marker is dragged.

Reproducible example

Reproducible example

Suggested solution(s)

Additional context

This is consistently replicable for me on Manjaro Linux, on all Chromium-based browsers. Tested on Chrome, Vivaldi, and Edge. Not replicable at all on Firefox 89.

Your environment

Software Name(s) Version
Reach Package @reach/slider ^0.15.0
React ^17.0.2
Browser Chrome 91
Assistive tech none
Node
npm/yarn
Operating System Manjaro Linux
chaance commented 3 years ago

Thanks for the detailed explanation! Will look into this one ASAP.

mz8i commented 1 year ago

Just revisited this and it seems that the issue still persists on latest version (@reach/slider@0.18.0 )