fix(react-dialog): respect `autoFocus` element over first focusable on dialog open by Copilot · Pull Request #36038 · microsoft/fluentui

Copilot · 2026-04-24T13:00:50Z

When a Dialog/Drawer contained an element with autoFocus={true} preceded by any other focusable element, the autofocus was silently ignored — findFirstFocusable always won by DOM order.

Changes

useFocusFirstElement.ts: Before calling findFirstFocusable, query the dialog root for [autofocus]. React lowers autoFocus={true} to the DOM autofocus attribute on mount, so querySelector('[autofocus]') reliably finds it. Falls back to findFirstFocusable (and the existing dev warning) when none is present.

// Before
const element = dialogRef.current && findFirstFocusable(dialogRef.current);

// After
const autoFocusElement = dialogRef.current?.querySelector<HTMLElement>('[autofocus]');
const element = autoFocusElement || (dialogRef.current && findFirstFocusable(dialogRef.current));

useFocusFirstElement.test.ts (new): Unit tests covering the autofocus-wins path and the no-autofocus fallback path, with mocked useFocusFinders and useFluent_unstable.

Since OverlayDrawer uses DialogSurface internally, this fix covers both Dialog and Drawer without any changes to drawer code.

#35749) Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/32dab34c-d281-4bef-af30-8c263a2a57d6 Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/32dab34c-d281-4bef-af30-8c263a2a57d6 Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

tudorpopams · 2026-04-24T14:10:55Z

@copilot fix CI

Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/c48f37af-fb63-4e6c-8a5e-f1f3c5437885 Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

Copilot · 2026-04-24T14:15:44Z

@copilot fix CI

Fixed in c91b181. The react-dialog:lint failure was caused by two issues in the new test file: MutableRefObject (deprecated, replaced with RefObject) and a missing import type * as React from 'react' (needed for the type cast).

tudorpopams · 2026-04-24T16:23:04Z

PR Review: #36038 — fix(react-dialog): respect `autoFocus` element over first focusable on dialog open

Author: app/copilot-swe-agent
Type: bug-fix
Packages affected: @fluentui/react-dialog (covers Drawer transitively — OverlayDrawer uses DialogSurface internally)
CI Status: passing (all 15 checks green, including e2e, VR screenshots, CodeQL)

Confidence Score: 100/100

Single-line source change (querySelector('[autofocus]') before falling back to findFirstFocusable) with both-paths unit coverage. Correctly scoped to the autofocus preference — doesn't touch FocusTrap/tabster — matching the guardrail in the Copilot brief.

Findings

Blockers (must fix before merge)

none

Warnings (should address)

none

Info (consider)

dialogRef.current?.querySelector('[autofocus]') walks the full subtree. In the rare case of a nested dialog rendered inside another dialog's surface, the outer effect could pick an [autofocus] from the nested dialog. Not a realistic flow for the Dialog/Drawer contract and not worth guarding against in this PR, but worth knowing if someone reports a regression — a scoped :scope > ... [autofocus]:not([role="dialog"] [autofocus]) query could tighten it later if needed.
Independently verified in a prior session: the full Dialog suite passes 124/124 including the new tests; baseline (no-autofocus) behavior preserved — default story still focuses the first focusable on mount. Drawer coverage comes transitively because OverlayDrawer uses DialogSurface.

Category Breakdown

Category	Status	Notes
Change file	PASS	`@fluentui-react-dialog-890df3cd-...json`, type `patch`. Description correctly cites `#35749` (the real issue — avoiding a prior Copilot session's wrong-issue-reference mistake).
V9 patterns	PASS	Hook is an internal utility; no `React.FC`, no styles touched, existing `useFluent_unstable()` `targetDocument` usage preserved for the dev-warning branch.
Dep layers	PASS	No `package.json` or new-import changes.
SSR safety	PASS	`querySelector` is called on `dialogRef.current` (a ref to a real DOM node that only exists after mount); no global `document`/`window` access. The existing no-focusable-element fallback path and its dev warning are unchanged.
Testing	PASS	New `useFocusFirstElement.test.ts` covers both paths — the no-autofocus case asserts `findFirstFocusable` is called and the first button is focused; the autofocus case asserts both that the autofocus input is focused and that `findFirstFocusable` is NOT called and the first button is NOT focused. The negative assertions are the ones that matter — they're what actually proves the preference order.
API surface	PASS	Internal hook; no public API change. `etc/react-dialog.api.md` untouched (correctly).
Accessibility	PASS	Makes React's `autoFocus={true}` behave per its documented contract inside dialogs. The existing empty-dialog fallback (`dialogRef.current?.focus()` with the dev warning for #25150) is preserved.
Security/Quality	PASS	No `eval`/`dangerouslySetInnerHTML`/`console.log`/`@ts-ignore`/`any`.

Recommendation

APPROVE

Clean minimal fix. The reshape from a single assignment to two lines preserves the existing "no focusable element at all" warning path exactly, and the test file explicitly asserts the wrong element is NOT focused in the autofocus case — which is the assertion that proves the fix, not just the positive path. Drawer coverage is handled automatically via DialogSurface composition, avoiding a duplicate fix on the drawer side.

Posted via the /review-pr skill.

github-actions · 2026-04-24T16:32:45Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: entire library	`1.302 MB` `325.338 kB`	`1.302 MB` `325.374 kB`	`80 B` `36 B`
`react-dialog` Dialog (including children components)	`101.984 kB` `30.317 kB`	`102.064 kB` `30.335 kB`	`80 B` `18 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`70.415 kB` `19.963 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`237.29 kB` `68.851 kB`
`react-components` react-components: FluentProvider & webLightTheme	`43.63 kB` `14.026 kB`
`react-headless-components-preview` react-headless-components-preview: entire library	`84.122 kB` `24.635 kB`
`react-portal-compat` PortalCompatProvider	`8.386 kB` `2.624 kB`
`react-timepicker-compat` TimePicker	`109.674 kB` `36.193 kB`

_{🤖 This report was generated against 0392152eacf970d6d7063c12af84b20b7d45c8e1}

github-actions · 2026-04-24T16:35:03Z

Pull request demo site: URL

github-actions · 2026-04-24T17:23:46Z

@@ -0,0 +1,7 @@
+{


🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 7530 Changed

vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 852 Changed

vr-tests-react-components/Positioning.Positioning end.chromium.png 778 Changed

vr-tests-react-components/ProgressBar converged 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 32 Changed

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 26 Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled.chromium.png 677 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

tudorpopams · 2026-04-28T08:15:42Z

@copilot fix CI

…eference behavior Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/6905bb7a-2a2f-43ea-b9c5-446aff8cef8d Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

Copilot · 2026-04-28T08:29:43Z

@copilot fix CI

The previous CI failure (react-drawer:test-rit--17--e2e) was a ChunkLoadError in OverlayDrawer.cy.tsx with React 17 — a webpack chunk failed to load, not a test assertion. This is unrelated to our changes (all 7 other drawer spec files passed, and our edits are limited to react-dialog). The same test passed in the run immediately before the merge commit.

I pushed a JSDoc improvement (42ea05e) to trigger a new CI run.

dmytrokirpa · 2026-04-29T18:54:06Z

    }
-    const element = dialogRef.current && findFirstFocusable(dialogRef.current);
+    const autoFocusElement = dialogRef.current?.querySelector<HTMLElement>('[autofocus]');
+    const element = autoFocusElement || (dialogRef.current && findFirstFocusable(dialogRef.current));


Shouldn't tabster (focusable) handle this?

@copilot why isn't this done directly with Tabster instead of finding the autofocus element yourself?

Tabster's focusable APIs (findFirst, findDefault) work exclusively with elements that have the data-tabster attribute set via useTabsterAttributes. They have no knowledge of the HTML autofocus attribute.

Specifically:

findFirst() returns the first focusable element by DOM order (by tabster rules)

findDefault() returns elements where tabster's FocusableProps.isDefault is set via a data-tabster attribute

React's autoFocus={true} lowers to the native HTML autofocus attribute at mount time, which tabster never reads. So there is no tabster API that can detect "this element has autoFocus={true}" without requiring every consumer to also add a data-tabster attribute with isDefault: true on the same element — a different API contract that would be a breaking change.

The querySelector('[autofocus]') approach reads exactly the signal React already wrote to the DOM, without requiring consumers to change anything.

@copilot so in order for this to be fully handled by Tabster (so no custom code in the Dialog component), would it require an update within findFirst() / findDefault() to have them work with autofocus attribute too? What would be the downsides to this?

Yes, that's the right intuition. For Tabster to handle this completely, either findFirst() would need to scan for [autofocus] before returning the DOM-order-first element, or a new findAutofocus() helper would be needed. Here are the downsides:

Tabster is an external package (tabster npm, not in this repo). Any change needs a PR there, a new release, and then a dep bump in @fluentui/react-tabster — affecting every component that uses tabster, not just Dialog.

Breaking change to findFirst() semantics — it currently guarantees "first focusable by DOM order". Making it priority-sort by autofocus changes those semantics for all tabster consumers (Angular, Vue, vanilla JS, etc.), not just Fluent UI.

isDefault / findDefault() are the wrong semantic — FocusableProps.isDefault is explicitly for Mover group preferred-focus, set via data-tabster attributes. It's not the same concept as the browser's autofocus. Conflating them would mislead developers.

It would still require caller code — even if Tabster had a findAutofocus(), useFocusFirstElement would still need to call it, so the Dialog-level code doesn't disappear entirely.

The querySelector('[autofocus]') in useFocusFirstElement is the right scope: two lines of standard DOM code that addresses Dialog's specific open-focus contract without requiring an external package change, API versioning, or any behavior change outside Dialog.

Copilot · 2026-05-04T08:14:51Z

@copilot fix CI

The CI workflows on the latest commit (42ea05ee) show action_required — this is GitHub's security gate that requires a maintainer to approve running CI on a bot-authored PR. There is no code failure to fix. The last actual test failure (react-drawer:test-rit--17--e2e on 7a7a658d) was the same transient ChunkLoadError (webpack chunk failed to load with React 17) unrelated to our changes — all Dialog tests pass.

@copilot fix CI

Same situation as above — the CI workflows are in action_required state waiting for a maintainer to approve running them on this bot PR. No code change is needed; all our changes are correct and the Dialog test suite passes.

Initial plan

f836615

Copilot AI assigned Copilot and tudorpopams Apr 24, 2026

Copilot started work on behalf of tudorpopams April 24, 2026 13:00 View session

Copilot AI linked an issue Apr 24, 2026 that may be closed by this pull request

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

Open

2 tasks

Copilot AI and others added 2 commits April 24, 2026 13:06

fix: prefer autofocus element over findFirstFocusable in Dialog/Drawer (

0a9325c

#35749) Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/32dab34c-d281-4bef-af30-8c263a2a57d6 Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

fix: simplify autofocus element lookup using optional chaining

add9204

Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/32dab34c-d281-4bef-af30-8c263a2a57d6 Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix autofocus in dialog when focusable elements precede~~ fix(react-dialog): respect autoFocus element over first focusable on dialog open Apr 24, 2026

Copilot finished work on behalf of tudorpopams April 24, 2026 13:08

Copilot AI requested a review from tudorpopams April 24, 2026 13:08

Copilot started work on behalf of tudorpopams April 24, 2026 14:11 View session

fix: resolve lint errors in useFocusFirstElement.test.ts

c91b181

Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/c48f37af-fb63-4e6c-8a5e-f1f3c5437885 Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

Copilot finished work on behalf of tudorpopams April 24, 2026 14:16

tudorpopams marked this pull request as ready for review April 24, 2026 14:58

tudorpopams requested a review from a team as a code owner April 24, 2026 14:58

tudorpopams requested a review from dmytrokirpa April 24, 2026 14:58

Merge branch 'master' into copilot/fix-autofocus-dialog-issue

7a7a658

tudorpopams enabled auto-merge (squash) April 24, 2026 16:28

github-actions Bot reviewed Apr 24, 2026

View reviewed changes

tudorpopams approved these changes Apr 27, 2026

View reviewed changes

Copilot started work on behalf of tudorpopams April 28, 2026 08:15 View session

docs: improve JSDoc for useFocusFirstElement to describe autofocus pr…

42ea05e

…eference behavior Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/6905bb7a-2a2f-43ea-b9c5-446aff8cef8d Co-authored-by: tudorpopams <97875118+tudorpopams@users.noreply.github.com>

Copilot finished work on behalf of tudorpopams April 28, 2026 08:31

Copilot AI requested a review from tudorpopams April 28, 2026 08:31

dmytrokirpa reviewed Apr 29, 2026

View reviewed changes

Copilot started work on behalf of tudorpopams May 4, 2026 07:56 View session

Copilot finished work on behalf of tudorpopams May 4, 2026 08:00

Copilot started work on behalf of tudorpopams May 4, 2026 08:10 View session

Copilot finished work on behalf of tudorpopams May 4, 2026 08:15

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png	7530	Changed
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png	5581	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png	404	Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png	413	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	852	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	778	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png	32	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png	26	Changed

Conversation

Copilot AI commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

tudorpopams commented Apr 24, 2026

Uh oh!

Copilot AI commented Apr 24, 2026

Uh oh!

tudorpopams commented Apr 24, 2026

PR Review: #36038 — fix(react-dialog): respect autoFocus element over first focusable on dialog open

Confidence Score: 100/100

Findings

Blockers (must fix before merge)

Warnings (should address)

Info (consider)

Category Breakdown

Recommendation

Uh oh!

github-actions Bot commented Apr 24, 2026

📊 Bundle size report

Uh oh!

github-actions Bot commented Apr 24, 2026

Uh oh!

github-actions Bot Apr 24, 2026

Choose a reason for hiding this comment

🕵🏾‍♀️ visual changes to review in the Visual Change Report

Uh oh!

tudorpopams commented Apr 28, 2026

Uh oh!

Copilot AI commented Apr 28, 2026

Uh oh!

dmytrokirpa Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

tudorpopams May 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 4, 2026

Choose a reason for hiding this comment

Uh oh!

tudorpopams May 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Apr 24, 2026 •

edited

Loading

PR Review: #36038 — fix(react-dialog): respect `autoFocus` element over first focusable on dialog open

Copilot AI commented May 4, 2026 •

edited

Loading