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

[kristofferdamborg]

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

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[Saeid-Za]

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]

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]

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]

@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]

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

[kristofferdamborg]

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

[ashomurodov]

@kristofferdamborg have you find solution for this? I have same issue but on web (nuxt project)

[kristofferdamborg]

@kristofferdamborg have you find solution for this? I have same issue but on web (nuxt project)

@ashomurodov I have not, unfortunately :(

[TomSmith27]

@kristofferdamborg Any luck finding a solution now?

[kristofferdamborg]

@kristofferdamborg Any luck finding a solution now?

@TomSmith27 I have not, unfortunately :(

[kristofferdamborg]

@zernonia Maybe you're the right guy to fix this or knows someone who can? The bug has been there for a while now, and it is a major hit for UX. I'm not sure how to fix it myself unfortunately :)

[angelorc]

Same issue here. It could require one or more click before it trigger the action. No idea why this happen. Tested on Android with Chrome.

[sarpere]

I have the same issue. Any updates?

[IroncladDev]

I managed to reproduce a similar issue with the React version of vaul and I think the issue is that an unwanted pointer-events: none is being added to the <body> tag

Can anyone confirm that this is being applied to the <body> tag?

[kristofferdamborg]

I managed to reproduce a similar issue with the React version of vaul and I think the issue is that an unwanted pointer-events: none is being added to the <body> tag

Can anyone confirm that this is being applied to the `` tag?

@IroncladDev It doesn't seem like pointer-events: none is being applied during my debugging, though I'm not 100% sure. Interestingly, the issue only happens if you swipe quickly to close the drawer — it doesn't occur when you close it slowly 😕

[rashidpathiyil]

I’m encountering the same issue on Nuxt 4. When I close the drawer, an inline style is added, preventing me from clicking anything on the page.

<body style="overflow: hidden; pointer-events: none;">

• Operating System: Darwin
• Node Version: v22.14.0
• Nuxt Version: 4.0.2
• CLI Version: 3.27.0
• Nitro Version: 2.12.4
• Package Manager: [email protected]
• vaul-vue Version: 0.4.1

[rashidpathiyil]

When I investigate the issue more deeply, I figure out that when I open a DropdownMenu it already add the style to body <body style="overflow: hidden; pointer-events: none;">, then If I triggered the drawer from the drop-down menu option, it will immediately open the drawer and close the drop-down menu, which will remove the style from the body, but currently, the drawer remains open and expects the style in the body. Then, if we close the drawer, it is adding back the style to the body, which will create the issue.

If I added a delay to open the drawer from the dropdown to make sure the drop-down is fully closed before opening the drawer, it is working as expected.

[kristofferdamborg]

@IroncladDev Are you looking for a solution? I would gladly assist you in any way I can :)

[IroncladDev]

I decided to move away from vaul for now, since my team didn't want to add an additional dependency.

Thanks for the help though.