[UDropdown]: Not work on clicking on its element on mobile

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.

https://ui.nuxt.com

MIT License

4.08k stars 529 forks source link

[UDropdown]: Not work on clicking on its element on mobile #1337

Closed nethriis closed 1 month ago

nethriis commented 9 months ago

Environment

Operating System: Windows_NT
Node Version: v20.10.0
Nuxt Version: 3.10.0
CLI Version: 3.10.0
Nitro Version: 2.8.1
Package Manager: npm@10.2.3
Builder: -
User Config: devtools, css, modules, postcss, site
Runtime Modules: nuxt-icon@0.6.8, @vueuse/nuxt@10.7.2, @nuxt/ui@2.13.0, @nuxtjs/seo@2.0.0-rc.7
Build Modules: -

Version

v2.13.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-2teyfq?file=app.vue

Description

On my PC it works well but on mobile I can't click on dopdown items. When I click on it the popover just disappear.

Additional context

No response

Logs

No response

sandros94 commented 7 months ago

I'm terribly sorry for the late reply.

I can confirm this can be tested using Chromium-based devtools in device emulation. It also happens in the docs 🤔

I'm not fully sure what is causing this, but considering the changes coming with #1289 and the fact this doesn't happen with radix-vue's dropdown we could wait for v3.0.

chachew commented 7 months ago

I have the same issue BUT i created a workaround for now.

It will work correctly in mobile IF the <UDropdown> is set to disabled.. <UDropdown disabled>. But then this breaks desktop functionality. So you can change the disabled state via the click pointer event.

Working Example

snowowowo commented 4 months ago

I have the same issue where, on mobile, you need to press and hold while moving your hand to the pop-up menu. The same problem occurs with UPopover.

sandros94 commented 4 months ago

I have the same issue where, on mobile, you need to press and hold while moving your hand to the pop-up menu. The same problem occurs with UPopover.

This is something that will change with the upcoming v3