segmentio/evergreen

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

malimccalla opened this issue · 3 comments

malimccalla commented

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

brandongregoryscott commented

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 commented

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 commented

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

  • 👍1