fix(Popover/Dropdown): prevent unintended closure on touchstart in mobile devices

[vahid-bagheri]

🔗 Linked issue

A previous PR #1520 changed the event listener from @touchstart.prevent to @touchstart.passive to improve performance on mobile devices. This change introduced an unintended side effect where popovers and dropdowns unintentionally close on touch interaction.

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This pull request addresses a bug where both popover and dropdown components would unintentionally close on touch interaction (specifically the @touchstart.passive event) on mobile devices. This behavior did not occur on desktops.

While a previous change aimed to improve mobile performance by switching to @touchstart.passive, it caused this unintended side effect.

The fix introduces a check for the event.cancelable property before closing the component. This ensures the component only closes on intentional touch interactions.

Benefits:
Maintains the performance improvement introduced by the previous change.
Improves user experience on touch devices by preventing accidental closure of popovers and dropdowns.

Resource:
Easy fix for: '[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false'

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

Thanks 😊

[mrclsnkpl]

Hi there,

seems like the problem still exists for me. Dropdowns and Popovers immediately close on touch devices. I'm on the latest release 2.15.1.
Can you reproduce this?

Thanks

[benjamincanac]

@mrclsnkpl There was a regression introduced in #1520 and fixed again in #1609 which hasn't been released yet.

[mrclsnkpl]

Ah, I see. Sorry, thought the fix was in 2.15.1.

Thanks a lot.

[bitbytebit1]

I'm still experiencing this issue on 2.15.2

[ghost]

"@nuxt/ui": "^2.18.4", dropdown на мобильных устройствах все еще не работает как надо
пока нашел такое решение

<script setup>
...
const handleTouchStart = (event: Event) => {
	if (event.cancelable) event.preventDefault()
}
</script>

<template>
	<UDropdown :items="options" :popper="{ placement: 'bottom-start' }">
	      <button type="button" @touchstart="handleTouchStart">   toggle   </button>
	                <template #item="{ item }">
				....
			</template>
	</UDropdown>
</template>