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.

Sign up for GitHub

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

Jump to bottom

SideSheet prevents page scroll even after closing, when preventBodyScrolling set to true #1619

Closed
malimccalla opened this issue Mar 6, 2023 · 3 comments
Closed

SideSheet prevents page scroll even after closing, when preventBodyScrolling set to true #1619

malimccalla opened this issue Mar 6, 2023 · 3 comments

Comments

@malimccalla
Copy link

I'm using the <SideSheet /> component in the following way

        <SideSheet
          preventBodyScrolling={true} //  could also be `sheet.visible` and it has same effect.
          onCloseComplete={() => sheet.close()}
          width={420}
          isShown={sheet.visible}
          position="right"
        >
          <Profile />
        </SideSheet>

I'm controlling the visibility of the sheet with a basic hook that toggles sheet.visible via sheet.close() and sheet.open(). This is working as expected.

However, when using the preventBodyScrolling prop, I can no longer scroll on the page after closing the sheet
@malimccalla malimccalla changed the title SideSheet prevents page scroll even after closing when preventBodyScrolling set to true SideSheet prevents page scroll even after closing, when preventBodyScrolling set to true Mar 6, 2023
@brandongregoryscott
Copy link
Contributor

Hey @malimccalla, can you provide a CodeSandbox for reproduction? I'm not seeing the described behavior: https://codesandbox.io/s/issue-1619-sidesheet-preventbodyscrolling-example-3f1sob?file=/src/App.tsx

@malimccalla
Copy link
Author

Hi @brandongregoryscott. I will attempt to reproduce some point today. Opening my console I can see that body gets the styles

<body style="overflow: hidden; padding-right: 0px;">

but on closing the sheet they never go away. I will try recreate and send over a sandbox later today. I'm using both Emotion and Next.js

@malimccalla
Copy link
Author

Will close this as I couldn't reproduce in a sandbox, and most likely related to some next.js SSR/emotion set up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brandongregoryscott @malimccalla