[Slider] Move focus to correct thumb when using keyboard #731
Conversation
| const target = event.target as HTMLElement; | ||
| target.setPointerCapture(event.pointerId); | ||
| // Prevent browser focus behaviour because we focus a thumb manually when values change. | ||
| event.preventDefault(); |
| event.preventDefault(); | ||
| // Touch devices have a delay before focusing so won't focus if touch immediately moves | ||
| // away from target (sliding). We want thumb to focus regardless. | ||
| if (context.thumbs.has(target)) { |
There was a problem hiding this comment.
Checking context instead of using the isThumb method. This allowed me to remove the data-radix-slider-thumb attribute that we had left over.
|
Love all the cleanup! |
I wondered that too but we're unable to replicate the issue locally. When we release this I'll pull into that repo that I have locally and check. |
|
In fact, if I run a |
| "@radix-ui/react-use-controllable-state": "workspace:*", | ||
| "@radix-ui/react-use-direction": "workspace:*", | ||
| "@radix-ui/react-use-layout-effect": "workspace:*", |
There was a problem hiding this comment.
We use this package in collection.tsx that was moved into Slider a while back but we forgot to add the dep.
Nope, looks like this PR actually makes it worse and I can't figure out why snowpack is reinstantiating the thumb, it's so weird 😬 This change fixes it but I don't understand why we would have to do that:
When I do some |
Fixes #730
HomeandEndkeypress too)setTimeoutlogicSliderParttoSliderImplfor consistencyThere is the following outstanding issue which I will fix in a separate PR:
CleanShot.2021-06-21.at.13.22.51.mp4
When the thumb reaches the same value as another thumb, I have to press the arrow one extra time than I should need to for it to move.