search

unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
5.26k stars 317 forks source link

[Bug]: All interactive elements require double-click after closing drawer by releasing on mobile #775

Open kristofferdamborg opened 2 months ago

kristofferdamborg commented 2 months ago

Reproduction

https://www.shadcn-vue.com/docs/components/drawer.html

Describe the bug

After closing the drawer component by dragging it down and releasing, the first click on any interactive element on the page is not registered. It requires a second click to actually trigger the element's action. It does only seem to happen on my mobile device.

Test flow:

  1. Open the drawer
  2. Close the drawer by dragging down and releasing
  3. You now have to click any interactive element on the page two times before the element's action is triggered

System Info

Test device: Google Pixel 8 Pro, Android 
Test browser: Google Chrome, version 128.0.6613.146

Contributes

Saeid-Za commented 2 months ago

Hello there! I can't reproduce the issue on the website itself Do you have any problem with the drawer component page? If not, could you please provide a reproduction?

kristofferdamborg commented 2 months ago

Hello there! I can't reproduce the issue on the website itself Do you have any problem with the drawer component page? If not, could you please provide a reproduction?

@Saeid-Za Which device did you test with? I am able to reproduce the issue on the website with my Android phone (Google Pixel 8 Pro) in the Chrome browser :)

Saeid-Za commented 2 months ago

I have the exact version Chrome: Chrome 128.0.6613.146 OS: Android 12; M2007J20CG Build/SKQ1.211019.001

But I can't reproduce the issue, could you please check if an overlay is present when dragging the drawer down? You can inspect an interactive element right after the drawer is closed. Do you encounter this issue only on your mobile device?

kristofferdamborg commented 2 months ago

@Saeid-Za

I have the exact version Chrome: Chrome 128.0.6613.146 OS: Android 12; M2007J20CG Build/SKQ1.211019.001

I have OS: Android 14; Build/AP22A.240905.003. Not sure if that changes anything 🤔

But I can't reproduce the issue, could you please check if an overlay is present when dragging the drawer down? You can inspect an interactive element right after the drawer is closed.

It's very weird - I tried inspecting on my phone and if I inspect the element I want to click before clicking it, after closing the drawer, the issue does not happen. It does happen if I do not inspect the element I want to click before clicking it. It does not seem like the overlay is present, but I'm not sure if that is because of the inspecting thing or not. I also tried adding an event listener for click events on the document and the click on an element after closing the drawer does not trigger at all 😕

Do you encounter this issue only on your mobile device?

Yes, mobile only.

I also tried to test on another device, a Google Pixel 6 Pro with same build and Chrome version, and the issue also happens on that device.

kristofferdamborg commented 2 months ago

Update: The bug is also happening on iPhone/Safari: https://github.com/radix-vue/vaul-vue/issues/66#issuecomment-2372024550

kristofferdamborg commented 3 weeks ago

@Saeid-Za Do you have any idea of how to fix this? :)