[Bug]: OverlayDrawer component stop working with NextJS 14.2+

[shaohaolin]

Library

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

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh

Are you reporting Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/nextjs-ytg51y?file=app%2Fcomponents%2FExample.tsx

Bug Description

Actual Behavior

In the sandbox, noticed the NextJS version is 14.2.0, clicking on the button, OverlayDrawer component does not open the drawer.

Expected Behavior

In the sandbox where NextJS version is 14.1.0, clicking on the button, OverlayDrawer component open the drawer.

Logs

useFocusFirstElement.js:22  @fluentui/react-dialog [useFocusFirstElement]:
A Dialog should have at least one focusable element inside DialogSurface.
Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`

Requested priority

Blocking

Products/sites affected

Skill Editor

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.

[elliot-huffman]

I can repro this on my project. It is blocking for us as we can't publish newer versions until this is fixed.

This issue is also affecting the dialog component, not just the drawer.

[layershifter]

FYI it works with reactStrictMode: false, https://stackblitz.com/edit/nextjs-juc3mq?file=next.config.js. Disabling Strict Mode looks like a reasonable workaround.

It looks that the source of the issue is Portal component:

• Portal without StrictMode (works ✅ ) - https://stackblitz.com/edit/nextjs-vwjkzr
• Portal with StrictMode (broken 🚨) - https://stackblitz.com/edit/nextjs-5kkgev

Seems like the source of the issue is microsoft/use-disposable#31 as Next.js uses React 18.3.0 canary.

[elliot-huffman]

FYI it works with reactStrictMode: false, https://stackblitz.com/edit/nextjs-juc3mq?file=next.config.js. Disabling Strict Mode looks like a reasonable workaround.

It looks that the source of the issue is Portal component:

• Portal without StrictMode (works ✅ ) - https://stackblitz.com/edit/nextjs-vwjkzr
• Portal with StrictMode (broken 🚨) - https://stackblitz.com/edit/nextjs-5kkgev

Seems like the source of the issue is microsoft/use-disposable#31 as Next.js uses React 18.3.0 canary.

I disabled strict mode, and it is indeed fixed!
Thanks for the workaround :)

I look forward to microsoft/use-disposable#31 getting fixed!

[shaohaolin]

Verified the workarounds, thanks @layershifter !

[layershifter]

Duplicate of #31429