[Bug]: [Drawer] Open and close the drawer disable scrolling on the page

[kolaps33]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (12) x64 Intel(R) Xeon(R) E-2176M  CPU @ 2.70GHz
    Memory: 10.80 GB / 31.74 GB
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/xxnsym?file=src%2Fexample.tsx

Bug Description

Steps:
Open sandbox: https://stackblitz.com/edit/xxnsym?file=src%2Fexample.tsx

1. open the flyout/drawer
2. close the flyout/drawer
3. try to scroll on the page

Actual Behavior

page is not possible to scroll, user need to refresh the page

Expected Behavior

page is scrollable the same as before

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[pradeept95]

Duplicate: #31334

Fix: #31367

[ParadimeWeb]

Yes, just noticed that bug. Thanks for fixing.

[layershifter]

Fixed in #31367.

[ryperl]

I just want to bring up that this is still happening on windows but is working on mac

windows 11 Enterprise
23H2
build: 22631.3593
Edge: Version 124.0.2478.105 (Official build) (64-bit)

but works on Mac Sonoma 14.4.1
Microsoft Edge
Version 124.0.2478.105 (Official build) (arm64)

Repro

1. navigate to: https://react.fluentui.dev/?path=/docs/components-drawer--default#overlay
2. interact with the Open Drawer button
3. close Drawer
4. Cannot Scroll the page anymore without refreshing

expected should be able to scroll, (which does happen on the mac)
@layershifter

[bsunderhus]

I just want to bring up that this is still happening on windows but is working on mac

windows 11 Enterprise 23H2 build: 22631.3593 Edge: Version 124.0.2478.105 (Official build) (64-bit)

but works on Mac Sonoma 14.4.1 Microsoft Edge Version 124.0.2478.105 (Official build) (arm64)

Repro

1. navigate to: https://react.fluentui.dev/?path=/docs/components-drawer--default#overlay
2. interact with the Open Drawer button
3. close Drawer
4. Cannot Scroll the page anymore without refreshing

expected should be able to scroll, (which does happen on the mac) @layershifter

I can confirm this is happening when reduced motion is on (seems to be unrelated to OS, it can be reproduced on Mac)

[bsunderhus]

Seems like this is related to how we deal with react-transition-group internally of the Dialog component. #31380 will fix this