Fix listbox closing immediately after opening on touch devices

[thecrypticace]

Fixes #3750

@RobinMalfait is this the right approach?

• probably need to write a test for this somehow? I feel like a playwright-style browser test might really be the only way to actually write this one.

[vercel]

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	Jul 23, 2025 11:20am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 23, 2025 11:20am

[RobinMalfait]

Couldn't reproduce this on a physical Android device in Chrome, but could reproduce it via the Chrome Devtools. Made some adjustments by essentially copying the full handlePointerDown implementation in the handleClick logic. Then made sure to capture the pointerType to ensure we rely on the pointerdown event for mouse types and click for touch and pen types.

Re-using the logic was necessary to prevent a bug where clicking the ListboxButton in an open Listbox closed the Listbox and immediately re-opened it.

My initial thinking was to use the event.currentTarget.setPointerCapture to ensure all pointer events were redirected to the ListboxButton and not any of the ListboxOption elements. But that didn't work because the click event was still fired on the ListboxOption itself.

trim.C7EAA7D7-87E1-4BB6-A522-106C1613A364.MOV

Re tests: I'm not sure how realistic it is to introduce these browser tests in this PR. I did manually test on Chrome and Safari (in normal mode, where pointerType is set to mouse), via Chrome Devtools to mimic the touch type, on Chrome for Android where I couldn't reproduce this issue initially but these changes also didn't break anything. Last but not least, I also tested on an iPad with a pencil where the pointerType was set to pen.