radix-vue / vaul-vue

An unstyled drawer component for Vue.
https://vaul.unovue.com
145 stars 6 forks source link

[Bug]: Using dropdown menu and drawer causes scrollbar to dissapear #37

Closed apodacaduron closed 1 month ago

apodacaduron commented 3 months ago

Reproduction

https://stackblitz.com/edit/vitejs-vite-jr9eay?file=src%2FApp.vue

Describe the bug

Hello everyone thanks for working on this great package, today i noticed that if you open the drawer using a dropdown menu the scrollbar no longer shows up after you close the drawer. This does not happen using a Sheet component.

Please check the reproduction link, notice that you can scroll, then open the dropdown menu and click Drawer, the scrollbar will display when using the drawer but if you close it, it gets hidden and you cannot do anything since it has no pointer events

2024-03-25 12 48 11

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    radix-vue: ^1.5.3 => 1.5.3 
    vue: ^3.4.21 => 3.4.21

Contributes

sadeghbarati commented 3 months ago

@zernonia Can you transfer this issue to vaul-vue

I think it's related to useBodyScrollLock.ts composable in radix-vue

zernonia commented 3 months ago

This could possibly be root issue from radix-vue. Will need to look deeper.

zernonia commented 2 months ago

Realized that there's some weird stuff happening with the useBodyScrollLock not acting correctly in Drawer component. Will look deeper soon

apodacaduron commented 2 months ago

Today i had some time to look into this i don't have much knowledge on the code but it seems like there are 2 instances of useBodyScrollLock, one created by radix-vue and another for vaul-vue, i think this causes the drawer not to be aware of the existing state created by radix components, so basically there's 2 states at the same time. I was thinking a solution could be to check the body styles in the useBodyScrollLock to reset the body styles if the local state says it is not locked but the body does have the overflow: hidden tag, but i haven't been able to make this work