Scrim -> SideSheet + Dialog - Scrollbar does not reappear when closing both at the same time

[Bjornar97]

Describe the bug

When opening a sidesheet and a dialog, then closing both at the same time (in the same function), the main scollbar does not reappear, and it is no longer possible to scroll the page.

There was a similar bug in an earlier version (0.41.4), which is in this issue: #3617
But in the previous case, it also happened when closing one at a time. This time, its just when closing both at the same time.

Seems like this bug has been here since since the previous one, we just didnt notice until now.

I found a workaround, adding a "sleep" in between closing the dialog and sidesheet like this, so react events are run in between them:

setShowDialog(false);

// This ensures that the dialog closes before the side sheet closes, which avoids the scrollbar disappearing
await new Promise((resolve) => setTimeout(resolve, 0));

setShowSidesheet(false);

Steps to reproduce the bug

1. Have this structure Scrim -> Sidesheet -> Dialog, all of them wrapped in a createPortal to document.body.
2. Open sidesheet, then open dialog
3. Close both dialog and sidesheet in one function.

Expected behavior

The scrollbar comes back, and the page is scrollable again.

Specifications

• Version: 0.43.0
• Browser: Edge 132
• OS: Windows 11

Additional context

Minimal reproduction sandbox: CodeSandbox

[oddvernes]

Is your createPortal conditionally rendered?

I am able to reproduce the issue this way, but if i remove isOpen && the problem goes away. The Scrim is conditionally rendered internally regardless so there is no need to do it from the outside

[Bjornar97]

In our codebase, it was conditionally rendered. I removed the conditional render, but the problem still persisted.
In the code sandbox example linked in the issue, there is no conditional render, and the problem is there as well.

[oddvernes]

Oh sorry I did not see the codesandbox at first. In my code the Dialog was inside the SideSheet which did not trigger the bug, but if I move it outside the Scrim the bug is back again. I guess some kind of race condition happens since both components (Scrim/Dialog) are rendered in parallell and both use the useHideBodyScroll hook... Not sure if there is an easy solution here other than placing Dialog inside Scrim or or your settimeout workaround 🤔