Mobile - Dropdowns automatically close when scrolling outside of the dropdown element.

[jeroen-fonky]

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

What version of that package are you using?
1.7.17

What browser are you using?
Chrome

Reproduction URL
https://headlessui.com/vue/listbox

Description
On mobile phone, opened dropdowns automatically close when scrolling outside of the dropdown element.
The error 986-51ff325a1976a40c.js:1 [Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. is thrown.

Steps to reproduce:

• Open https://headlessui.com/vue/listbox
• Open the dropdown
• Open dev tools
• Use Dimensions: responsive and make the page so small that a scrollbar appears within the scrollbar
• Click outside of the modal and move down (like scrolling down on your mobile phone)
• Your dropdown automatically closes, which is annoying
• There's an error in the console

[peter-neumann-dev]

I have the same issue with the Popover

[oebiesoft]

Me too!

[zenodegenkamp]

Me too !

[nikitas]

Reproducable, @peter-neumann-dev @oebiesoft @zenodegenkamp have you guys found a way to fix it?

[RobinMalfait]

Hey!

This should be fixed by #3266, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[jeroen-fonky]

Thanks for your efforts, keep up the good work!