[Forms] Focus Autofocus inputs rendered after the page is loaded

[NoobMaster (oONoobMasterOo)]

Pull Request

📖 Description

Cause

The web components apply autofocus with maybeSetAutoFocus(), which focuses the element only when no other element is focused (document.activeElement is null, body or the element itself), like the native attribute.

• [dev-v5] fix: conditional AutoFocus #4699: the input is shown by clicking a switch, which keeps the focus.
• [dev-v5] fix: Focus on page navigation #4968: after a navigation, the link that was clicked stays focused when it's part of a persistent layout (nav menu). After F5 nothing is focused, so autofocus works. It also works in the demo when the link is inside the page, because the link is removed by the navigation.

Fix

FluentField focuses its input after the first render when Autofocus is set, using a new Attributes.focus script function. Inputs without Autofocus don't make any extra JS call. The Autofocus value is read through a new internal IFluentControlAutofocus interface implemented by FluentInputBase, like IFluentControlAriaLabel, so IFluentField is unchanged.

The focus is applied after the aria-label copy, so the accessible name is set when the input is focused.

🎫 Issues

• Fixes [dev-v5] fix: conditional AutoFocus #4699
• Fixes [dev-v5] fix: Focus on page navigation #4968

👩‍💻 Reviewer Notes

Inputs without Autofocus don't make any extra JS call. The focus is applied after the aria-label copy in FluentField.

📑 Test Plan

Unit tests

Added:

• InputBase_Autofocus_FocusesInputAfterFirstRender

• InputBase_Autofocus_FocusesCheckboxAfterFirstRender

• InputBase_WithoutAutofocus_DoesNotFocusInput

• Full tests/Core suite on this branch: 4906 tests, 0 failed (at 77ac4fac7).

Manual test

Demo (Interactive Server), before / after:

Scenario	Before	After
A switch shows a FluentTextInput Autofocus (sample from #4699)	the switch keeps the focus	the input is focused, typing goes into it
A persistent nav link is focused, then navigate to a page with a FluentTextInput Autofocus (#4968)	the nav link keeps the focus	the input is focused

Other checks

• Before / after video: see the comment with the recordings below.
• Not tested with Interactive WebAssembly.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

AI contribution declaration

AI assistance is allowed; fully AI-generated or autonomous pull requests without meaningful human review are not accepted. See the AI contribution policy.

• I have read and followed the AI contribution policy.
• I have personally reviewed and understood all changes, tested them, and take responsibility for this contribution.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

None.

[Copilot]

🟢 Approval recommended

The focused changes have no identified blocking issues and include regression tests, though tests were not executed.

No open issues 🎉

What changed in this PR

Fixes autofocus for Fluent UI inputs rendered conditionally or after navigation, addressing #4699 and #4968.

Changes:

• Focuses autofocus-enabled inputs after their first render and accessibility-label setup.
• Adds an internal autofocus contract and a JavaScript focus helper.
• Adds tests for text inputs, checkboxes, and inputs without autofocus.

File	Description
tests/​Core/​Components/​Base/​InputBaseTests.cs	Adds autofocus interop tests.
src/​Core/​Components/​Field/​FluentField.razor.cs	Applies focus after accessibility-label setup.
src/​Core/​Components/​Base/​IFluentControlAutofocus.cs	Defines the internal autofocus contract.
src/​Core/​Components/​Base/​FluentInputBase.cs	Implements the autofocus contract.
src/​Core.Scripts/​src/​Utilities/​Attributes.ts	Adds an element-focus helper.

_{Review effort: Balanced}

[Denis Voituron (dvoituron)]

Could you please provide a short video showing the issue before the code change, and then the expected behavior after the fix? This will make it easier to clearly see and validate the improvement.
(You can use “Peek - Screen Recorder,” a free tool, to do this)

[NoobMaster (oONoobMasterOo)]

Here is the requested video, with a page showing both cases: a switch showing a FluentTextInput Autofocus (#4699), and a navigation to a page with a FluentTextInput Autofocus using a button that stays on the page (#4968).

Before (dev): the input doesn't get the focus in both cases, so the typed text goes nowhere.

5474-before.mp4

After (this PR): the input gets the focus in both cases and the typed text goes into it.

5474-after.mp4

[Denis Voituron (dvoituron)]

We've added a new requirement regarding PRs

• See https://github.com/microsoft/fluentui-blazor/blob/dev/docs/contributing.md#ai-contribution-policy
• And https://github.com/microsoft/fluentui-blazor/blob/dev/.github/pull_request_template.md
  You must therefore add these two new checkboxes to your description.
  Otherwise, you can close your PR.

[NoobMaster (oONoobMasterOo)]

We've added a new requirement regarding PRs

• See https://github.com/microsoft/fluentui-blazor/blob/dev/docs/contributing.md#ai-contribution-policy
• And https://github.com/microsoft/fluentui-blazor/blob/dev/.github/pull_request_template.md
  You must therefore add these two new checkboxes to your description.
  Otherwise, you can close your PR.

Checked