search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
26.21k stars 1.09k forks source link

Range input (slider) broken in Dialog on iOS #3165

Closed ErikBooij closed 6 months ago

ErikBooij commented 6 months ago

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? For example: v1.7.19

What browser are you using? Safari, iPadOS

Reproduction URL https://github.com/ErikBooij/headlessui-ios-poc

Describe your issue The repo linked above shows an example of what happens when you include a slider (<input type="range" />) in a Dialog on iOS/iPadOS (17.4).

Clicking/tapping anywhere on the track moves the thumb there, but you cannot pick up and drag the slider as you normally (outside of a Dialog) would.

It looks almost as if something captures the mousedown, touchstart, or any other relevant event, but I haven't been able to pinpoint it. The same issue does not appear in desktop browsers, I cannot test Android.

thecrypticace commented 6 months ago

Hey, we've merged the fix for this and it'll be in v2.0. We'll get this backported to v1.7.x later today or Monday.

ErikBooij commented 6 months ago

Awesome, exceptional support! 🙏 Looking forward to it, thanks!