Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 tasks
apodacaduron opened this issue Mar 25, 2024 · 4 comments · Fixed by #44
Closed
2 tasks

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

apodacaduron opened this issue Mar 25, 2024 · 4 comments · Fixed by #44
Assignees
Labels
bug Something isn't working

Comments

@apodacaduron
Copy link

apodacaduron commented Mar 25, 2024

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

  • I am willing to submit a PR to fix this issue
  • I am willing to submit a PR with failing tests
@apodacaduron apodacaduron added the bug Something isn't working label Mar 25, 2024
@apodacaduron apodacaduron changed the title [Bug]: Using dropdown menu and drawer causes sidebar to dissapear [Bug]: Using dropdown menu and drawer causes scrollbar to dissapear Mar 25, 2024
@sadeghbarati
Copy link
Collaborator

@zernonia Can you transfer this issue to vaul-vue

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

@zernonia zernonia transferred this issue from unovue/shadcn-vue Apr 2, 2024
@zernonia
Copy link
Member

zernonia commented Apr 2, 2024

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

@zernonia
Copy link
Member

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

@apodacaduron
Copy link
Author

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

@zernonia zernonia self-assigned this May 6, 2024
@zernonia zernonia linked a pull request May 6, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants