[Bug]: Focus goes behind backdrop when Dialog closed via mouse click

[nigolaj]

Component

Dialog

Package version

9.54.13

React version

18.3.1

Environment

System:
OS: Linux 6.10 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
Memory: 6.77 GB / 15.01 GB
Container: Yes
Shell: 5.2.15 - /bin/bash
npmPackages:
@fluentui/react-components: ^9.54.13 => 9.54.13
@types/react: ^18.3.3 => 18.3.4
@types/react-dom: ^18.3.0 => 18.3.0
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1

Current Behavior

Closing Dialog B opened via a Button from Dialog A causes focus to go behind Dialog A's backdrop despite useRestoreFocusTarget() being set on the Button. This renders form inputs in Dialog A unusable. The issue only manifests when Dialog B is closed with a mouse click, not Esc.

Expected Behavior

Closing Dialog B causes focus to go back to the Button in all cases.

Reproduction

https://stackblitz.com/edit/83wvqv-ndwglu?file=src%2Fexample.tsx

Steps to reproduce

Open BOTTOM dialog
Open TOP dialog
Close TOP dialog WITH A MOUSE CLICK (not keyboard)
Attempt to focus the input in BOTTOM dialog
Note how focus immediately goes behind BOTTOM dialog's backdrop

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

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.

[TristanWatanabe]

Can confirm repro of this bug, closing the second Dialog via mouse click does not restore focus to the first Dialog's trigger button (it does when hitting Esc key + adding useRestoreFocusTarget however)

[miroslavstastny]

First, we need to check whether this is a bug in tabster. Also see #33230