search

nextui-org / nextui

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

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

Open robin-kestrel opened 6 months ago

robin-kestrel commented 6 months 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 6 months ago

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

sans-byte commented 4 months ago

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

wingkwong commented 4 months 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
abhinav700 commented 2 months ago

I think the reason for this bug is that right slider is always above the left slider. Therefore when we try to move the slider back , we are clicking on right slider which cannot move past the left slider.

Notice that the same problem does not happen when we move both slider to left end because right slider, which is above left slider and comes into focus when we click on them ( even when both sliders are overlapping). In this case right slider can move to right side freely.

@wingkwong can you assign this issue to me? I would like to work on it.

wingkwong commented 2 months ago

@abhinav700 I think this should be handled in RA side (see abovementioned issue link). I'm fine that you could explore if there is a workaround.

abhinav700 commented 2 months ago

ok. I will try to investigate that.