Component
Dialog
Package version
9.72.3
React version
19.2.3
Environment
System:
OS: macOS 14.8.3
CPU: (10) arm64 Apple M1 Pro
Memory: 133.41 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 145.0.7632.46
Firefox: 147.0.3
Firefox Developer Edition: 148.0
Safari: 18.6
npmPackages:
@fluentui/react-calendar-compat: 0.3.11 => 0.3.11
@fluentui/react-components: 9.72.3 => 9.72.3
@fluentui/react-datepicker-compat: 0.6.17 => 0.6.17
@fluentui/react-icons: 2.0.312 => 2.0.312
@fluentui/react-icons-font-subsetting-webpack-plugin: 2.0.297 => 2.0.297
@fluentui/react-jsx-runtime: 9.3.0 => 9.3.0
@fluentui/react-timepicker-compat: 0.4.21 => 0.4.21
@fluentui/svg-icons: 1.1.312 => 1.1.312
@types/react: 19.2.7 => 19.2.7
@types/react-dom: 19.2.3 => 19.2.3
react: 19.2.3 => 19.2.3
react-dom: 19.2.3 => 19.2.3
Current Behavior
Given a drawer or dialog that has an input with autoFocus={true}, and a focusable element preceding the input:
- Open the dialog.
- The first focusable element in the dialog is focused.
Expected Behavior
Given a drawer or dialog that has an input with autoFocus={true}, and a focusable element preceding the input:
- Open the dialog.
- The input with
autoFocus={true} in the dialog is focused.
Reproduction
https://stackblitz.com/edit/vitejs-vite-mzwvzrxm?file=src%2Fcomponents%2FExample.tsx
Steps to reproduce
- Click the "Open drawer" or "Open dialog" buttons.
- Observe that the input (which has
autoFocus={true}) is not auto focused.
There are workarounds for this issue (I have included one in the reproduction).
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
Component
Dialog
Package version
9.72.3
React version
19.2.3
Environment
System: OS: macOS 14.8.3 CPU: (10) arm64 Apple M1 Pro Memory: 133.41 MB / 32.00 GB Shell: 5.9 - /bin/zsh Browsers: Chrome: 145.0.7632.46 Firefox: 147.0.3 Firefox Developer Edition: 148.0 Safari: 18.6 npmPackages: @fluentui/react-calendar-compat: 0.3.11 => 0.3.11 @fluentui/react-components: 9.72.3 => 9.72.3 @fluentui/react-datepicker-compat: 0.6.17 => 0.6.17 @fluentui/react-icons: 2.0.312 => 2.0.312 @fluentui/react-icons-font-subsetting-webpack-plugin: 2.0.297 => 2.0.297 @fluentui/react-jsx-runtime: 9.3.0 => 9.3.0 @fluentui/react-timepicker-compat: 0.4.21 => 0.4.21 @fluentui/svg-icons: 1.1.312 => 1.1.312 @types/react: 19.2.7 => 19.2.7 @types/react-dom: 19.2.3 => 19.2.3 react: 19.2.3 => 19.2.3 react-dom: 19.2.3 => 19.2.3Current Behavior
Given a drawer or dialog that has an input with
autoFocus={true}, and a focusable element preceding the input:Expected Behavior
Given a drawer or dialog that has an input with
autoFocus={true}, and a focusable element preceding the input:autoFocus={true}in the dialog is focused.Reproduction
https://stackblitz.com/edit/vitejs-vite-mzwvzrxm?file=src%2Fcomponents%2FExample.tsx
Steps to reproduce
autoFocus={true}) is not auto focused.There are workarounds for this issue (I have included one in the reproduction).
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