Updating to >2.15.0 breaks Dropdowns on touch devices when drag and drop libraries are used

[plushdohn]

Environment

• Operating System: Darwin
• Node Version: v21.2.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]

Version

v2.16.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-g2c3gh?file=app.vue

Description

Related to #1647

Importing (and not necessarily using) a drag and drop library causes a reproduction of the previously reported error, where dropdowns and popovers immediately close on touch devices.

I think the culprit PR could be #1520 as this can be fixed locally by removing the @touchstart.passive event handler from the Dropdown component code.

In the reproduction I'm importing vue-draggable-plus but I think this can be reproduced with any dnd library that uses SortableJS (and possibly others too)

It's making us unable to upgrade past 2.14 as we are making heavy use of both dropdowns and drag and drop in production.

Additional context

To reproduce open the reproduction on a responsive MOBILE viewport and emulate opening the dropdown with a touch input. Please try multiple times as this behaviour is flaky in the sandbox viewport (on an external viewport I reproduce 100% of the time)

Logs

No response

[markmelnic]

Can confirm, the dropdown is not staying open unless you hold it down.

[oawebdev]

Confirmed the same with popover. Temp fix:

<UPopover v-model="open">
<UButton @touchstart.stop.prevent="open = !open">
....

[Quasarman]

v-model="open"

Hmm this is not working for me

Edit: It is working but you have to use v-model:open="open", thanks!

[oawebdev]

@touchstart.stop.prevent

Yea, sorry the full code is:

<UDropdown v-model:open="open" :items="items">
    <UButton label="Actions" variant="ghost" color="gray" @touchstart.stop.prevent="open = !open">
      .....
    </UButton>
  </UDropdown>

[plushdohn]

@benjamincanac Sorry for pinging you I know you guys are focused on v3, but this has been blocking my team from upgrading 3 minor versions now. We also want to upgrade to v3 as soon as it's ready, but being left in 2.14 will make us struggle even more to follow any migration guide. It should be a one-line fix for which I can make a PR if you think it's appropriate 🙏🏻

[benjamincanac]

@plushdohn I just tried the solution above from @oawebdev and it works: https://stackblitz.com/edit/nuxt-ui-ab1ftn?file=app.vue. What's blocking you from doing the same?

The issue here is if I remove the @touchstart.passive / @touchstart.prevent like before, we're going to introduce back the previous bug which prevented to open on mobile (had to press twice). All these hacks are due to Headless UI and should be solved with the migration to Radix Vue in v3.

[plushdohn]

@plushdohn I just tried the solution above from @oawebdev and it works: https://stackblitz.com/edit/nuxt-ui-ab1ftn?file=app.vue. What's blocking you from doing the same?

Between Dropdowns, Popovers and SelectMenus we're using these components in around 53 places in our codebase and our user-base is 93% mobile. Not all pages also import a dnd library, but yeah that's a lot of manual testing to do so that's why I was a bit hesitant to go and apply this workaround everywhere. We can make that work, but I thought it was worth fixing if it was a one-liner.

The issue here is if I remove the @touchstart.passive / @touchstart.prevent like before, we're going to introduce back the previous bug which prevented to open on mobile (had to press twice). All these hacks are due to Headless UI and should be solved with the migration to Radix Vue in v3.

I see. I agree the PR I linked isn't really the single culprit, but if I'm not mistaken this issue didn't exist at all up to 2.14, so it's the sequence of #1520 and then #1609. I understand reverting #1520 is a regression (as you'd get the console warning again), so I'll try to come up with a local patch that fixes both.

Thank you for your time, sorry again for pinging you 🙏🏻