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

Scrim -> Sidesheet -> Dialog hides scrollbar, and doesnt give it back after closing all of them #3617

Closed
Bjornar97 opened this issue Sep 6, 2024 · 2 comments · Fixed by #3619
Labels
🐛 bug Something isn't working

Comments

@Bjornar97
Copy link

Describe the bug

When you open a dialog that is inside a sidesheet that is inside a scrim, and then close the dialog, then close the sidesheet and scrim, scrollbar doesnt come back, so its not possible to scroll the page.

Steps to reproduce the bug

  1. Have a page with scroll, with a Scrim, with a Sidesheet inside the scrim
  2. Have a dialog inside the sidesheet
  3. Open the sidesheet, then open the dialog
  4. Close the dialog, then close the sidesheet
  5. See that its not possible to scroll the page

Expected behavior

When inside the sidesheet it should remove scrollbar, but after closing the dialog and sideheet, scrollbar should reappear.

Specifications

  • Version: 0.41.4
  • Browser: Edge 128.0.2739.63
  • OS: Windows 11

Additional context

Example in CodeSandbox: https://codesandbox.io/p/devbox/bug-eds-menuitem-xkjvdz?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzcfvffk00073j6isu05gjd5%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzcfvffk00023j6iehyeamuu%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzcfvffk00043j6ilhs1g8cz%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzcfvffk00063j6ike2g15ef%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzcfvffk00023j6iehyeamuu%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzcfvffk00013j6i8iwa1iaw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cm0qphay000023j6osgj1r6p4%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A18%252C%2522startColumn%2522%253A59%252C%2522endLineNumber%2522%253A18%252C%2522endColumn%2522%253A59%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzcfvffk00023j6iehyeamuu%2522%252C%2522activeTabId%2522%253A%2522cm0qphay000023j6osgj1r6p4%2522%257D%252C%2522clzcfvffk00063j6ike2g15ef%2522%253A%257B%2522id%2522%253A%2522clzcfvffk00063j6ike2g15ef%2522%252C%2522activeTabId%2522%253A%2522cm0qpkgrh002u3j6oiutkoe2u%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzcfvffk00053j6iciugy0ik%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%257D%252C%257B%2522type%2522%253A%2522SETUP_TASKS%2522%252C%2522id%2522%253A%2522cm0qk95m500073j6i2n8yckos%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A5173%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cm0qke5ow002h3j6ilhcy9l8v%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522SANDBOX_INFO%2522%252C%2522isCloud%2522%253Atrue%252C%2522id%2522%253A%2522cm0qpkgrh002u3j6oiutkoe2u%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clzcfvffk00043j6ilhs1g8cz%2522%253A%257B%2522id%2522%253A%2522clzcfvffk00043j6ilhs1g8cz%2522%252C%2522activeTabId%2522%253A%2522clzcfvffk00033j6ikxd5fnls%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzcfvffk00033j6ikxd5fnls%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522install%2522%252C%2522id%2522%253A%2522cm0qkddlr001d3j6i8e1r9xm7%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

@Bjornar97 Bjornar97 added the 🐛 bug Something isn't working label Sep 6, 2024
@oddvernes
Copy link
Collaborator

Scrim uses lockScroll prop on floatingOverlay from floating-ui to lock scroll, while Dialog uses our own useHideBodyScroll hook which does the same thing , so there is a conflict between the two solutions. I will take a look at it 👍

@oddvernes
Copy link
Collaborator

The fix for this was released as eds-core-react@0.41.5

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.

2 participants