nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
20.43k stars 1.23k forks source link

[BUG] - Range sliders get stuck when both handles are at the end of the slider #3032

Open robin-kestrel opened 1 month ago

robin-kestrel commented 1 month ago

NextUI Version

2.3.6

Describe the bug

If both handles of a range slider are positioned at the end of the slider and the active handle loses focus, the handles can no longer be interacted with via pointer, because the second handle receives all pointer events but is constrained such that it cannot move. It is possible to escape from this state by clicking on the track or using the keyboard, but these workarounds may not be obvious to an end user.

(I found this bug in the course of discussing a very similar bug in react-aria-components.)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Look at any NextUI Range Slider, e.g. https://nextui.org/docs/components/slider#range-slider
  2. Drag the second handle all the way to the end of the slider.
  3. Drag the first handle all the way to the end of the slider.
  4. Click somewhere else, to drop the focus on the first handle.
  5. Try interacting with the handles again. Note that they are stuck.

Expected behavior

As a user, I expected the slider to not get stuck but I am seeing the slider get stuck.

Screenshots or Videos

No response

Operating System Version

OS X

Browser

Firefox

linear[bot] commented 1 month ago

ENG-860 [BUG] - Range sliders get stuck when both handles are at the end of the slider

sans-byte commented 1 week ago

Can you please provide more info on this bug because I'm not able to get where exactly it is breaking.

wingkwong commented 1 week ago

@sans-byte just follow the step and you will see the below screen. After dragging the both thumb to the end, you won't be able to drag either one back. I''ll put this issue on hold first as RA team is working on it already.

image