Skip to content

[Bug]: Autofocus does not work in dialog/drawer if any focusable element precedes the autofocus element #35749

@mindgrub-egottlieb

Description

@mindgrub-egottlieb

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:

  1. Open the dialog.
  2. 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:

  1. Open the dialog.
  2. 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

  1. Click the "Open drawer" or "Open dialog" buttons.
  2. 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

  • 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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions