search

tailwindlabs / headlessui

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

Cancel outside click behavior on touch devices when scrolling #3266

Closed RobinMalfait closed 4 months ago

RobinMalfait commented 4 months ago

This PR improves the outside click behavior on touch devices.

Before this change, if a <Menu /> or <Dialog /> was open, then "scrolling" or "swiping" your finger on the screen would close the <Menu /> or <Dialog /> respectively.

This is because we also checked for touchend events (which are fired when you lift your finger). Right now, we will make sure that your finger has to move at least some amount (set it to 30px for now, which felt good while testing on mobile devices) in order to cancel the outside click behaviour. If you didn't move within 30px then we consider it an outside click.

Now, scrolling doesn't close the component, but a tap (touchend) will close it as expected.

Fixes: #3038

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 3, 2024 11:25am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 3, 2024 11:25am