microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.29k stars 2.71k forks source link

[Bug]: Nested dialog focus restore is broken #32068

Open jcksonhe opened 1 month ago

jcksonhe commented 1 month ago

Library

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

System Info

System:
  OS: Windows 10 10.0.22631
  CPU: (12) x64 Intel(R) Xeon(R) W-2235 CPU @ 3.80GHz
  Memory: 12.67 GB / 63.59 GB
Browsers:
  Edge: Chromium (126.0.2592.102)
  Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

yes

Reproduction

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

Bug Description

Actual Behavior

I have a component that opens a Dialog/Drawer, which can open other Dialogs/Drawers.

However, I noticed that if I:

  1. Open the first Dialog
  2. In the Dialog focus trap, hold down tab so the focus cycles through the DialogTrigger Buttons many times
  3. Hit "Esc"
  4. Focus does not restore to the original button that opened the Dialog

If I don't cycle the focus many times, the issue doesn't repro. Same issue occurs with Drawer.

Expected Behavior

Expect restore focus to work in all scenarios after pressing "Esc" within a Dialog/Drawer

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

sopranopillow commented 1 month ago

I was able to repro, I tried changing the dialogs to buttons and it did not repro, so it seems it's only with nested dialogs.