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

shaohaolin commented 3 months ago

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

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

elliot-huffman commented 3 months ago

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 commented 3 months ago

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 https://github.com/microsoft/use-disposable/issues/31 as Next.js uses React 18.3.0 canary.

elliot-huffman commented 3 months ago

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 https://github.com/microsoft/use-disposable/issues/31 getting fixed!

shaohaolin commented 3 months ago

Verified the workarounds, thanks @layershifter !

microsoft / fluentui