Repository navigation
[Inputs] Implement Autofocus for Fluent input components - #5515
Open
Denis Voituron (dvoituron) wants to merge 28 commits into
Open
Denis Voituron (dvoituron) wants to merge 28 commits into
Denis Voituron (dvoituron) wants to merge 28 commits into
Conversation
…nd implement autofocus in OnAfterRenderAsync
…rty naming and enhance test coverage
…tComponentAutofocus interface and overriding OnAfterRenderAsync
…se method is called on first render and add test for FluentTimePicker autofocus behavior
…behavior and ensure FASTElement initialization
…usBySelector and implementing FocusElementBySelectorAsync method for component-specific autofocus handling
…ialization sequence and updating focus methods to support selector-based targeting
…for selectable days
…ests by generating stable IDs for invalid inputs and ensuring proper focus behavior
…nd improve clarity
Denis Voituron (dvoituron)
requested a review
from Vincent Baaij (vnbaaij)
as a code owner
October 22, 2026 15:22
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.9%
Microsoft.FluentUI.AspNetCore.Components.Charts - 100%
|
Marvin Klein (MarvinKlein1508)
self-requested a review
October 22, 2026 15:27
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved ID handling and calendar-view targeting issues prevent focus from working reliably with supported component configurations.
4 open issues
What changed in this PR
Adds shared first-render autofocus and programmatic focus support to Fluent UI Blazor inputs and buttons.
Changes:
- Introduces a common focus interface, lifecycle helpers, and JavaScript focus utilities.
- Connects component rendering to autofocus and waits for listbox initialization before focusing.
- Adds focus tests and an interactive debug page.
| File | Description |
|---|---|
| tests/Core/Extensions/FluentComponentAutofocusExtensionsTests.cs | Tests focus helpers, validation, and error propagation. |
| tests/Core/Components/List/FluentListboxTests.razor | Tests active-option focus and initialization ordering. |
| tests/Core/Components/DateTimes/FluentTimePickerTests.razor | Tests autofocus across render styles. |
| tests/Core/Components/DateTimes/FluentCalendarTests.razor | Tests selectable-day targeting. |
| tests/Core/Components/Button/FluentCompoundButtonTests.razor | Tests autofocus and generated IDs. |
| tests/Core/Components/Button/FluentButtonTests.razor | Tests manual focus and first-render autofocus. |
| tests/Core/Components/Base/InputBaseTests.cs | Reuses shared component initialization data. |
| tests/Core/Components/Base/FluentInputBaseFocusTests.razor | Tests shared focus behavior and selectors. |
| tests/Core/Components/Base/BaseHelpers.cs | Centralizes generic component initialization. |
| tests/Core/Components/Base/AutofocusTests.cs | Adds interface-wide focus tests. |
| src/Core/Extensions/FluentComponentAutofocusExtensions.cs | Centralizes autofocus and focus interop. |
| src/Core/Components/TextInput/FluentTextInput.razor.cs | Calls the base autofocus lifecycle. |
| src/Core/Components/TextArea/FluentTextArea.razor.cs | Calls the base autofocus lifecycle. |
| src/Core/Components/Switch/FluentSwitch.razor.cs | Calls the base autofocus lifecycle. |
| src/Core/Components/Radio/FluentRadioGroup.razor.cs | Calls the base autofocus lifecycle. |
| src/Core/Components/NumberInput/FluentNumberInput.razor.cs | Calls the base autofocus lifecycle. |
| src/Core/Components/List/FluentListbox.razor.cs | Focuses the active option after initialization. |
| src/Core/Components/DateTime/FluentTimePicker.razor.cs | Calls the base autofocus lifecycle. |
| src/Core/Components/DateTime/FluentCalendar.razor.cs | Adds a focusable-day selector. |
| src/Core/Components/Checkbox/FluentCheckbox.razor.cs | Preserves initialization and invokes base autofocus. |
| src/Core/Components/Button/FluentToggleButton.razor | Uses the renamed Autofocus property. |
| src/Core/Components/Button/FluentMenuButton.razor | Uses the renamed Autofocus property. |
| src/Core/Components/Button/FluentCompoundButton.razor.cs | Adds focus support and autofocus ID generation. |
| src/Core/Components/Button/FluentCompoundButton.razor | Uses the renamed Autofocus property. |
| src/Core/Components/Button/FluentButton.razor.cs | Adds focus support and autofocus ID generation. |
| src/Core/Components/Button/FluentButton.razor | Uses the renamed Autofocus property. |
| src/Core/Components/Base/IFluentComponentAutofocus.cs | Defines the shared focus contract. |
| src/Core/Components/Base/FluentInputBase.cs | Implements shared input focus behavior. |
| src/Core/Components/Base/FluentComponentBase.cs | Exposes the runtime to internal helpers. |
| src/Core.Scripts/src/Utilities/DomFunctions.ts | Adds element and selector focus utilities. |
| src/Core.Scripts/src/ExportedMethods.ts | Exports the focus utilities for interop. |
| src/Core.Scripts/src/Components/List/ListBoxContainer.ts | Makes initialization awaitable and reuses instances. |
| examples/Demo/FluentUI.Demo.Client/DebugPages/AutofocusPage.razor | Adds interactive autofocus demonstrations. |
Review effort: Balanced
Marvin Klein (MarvinKlein1508)
suggested changes
Oct 23, 2026
…ar elements for improved accessibility
…Runtime for better encapsulation in autofocus extensions
…oft/fluentui-blazor into users/dvoituron/autofocus
…istboxTests for improved accuracy and consistency
…ved accessibility and reliability
Marvin Klein (MarvinKlein1508)
approved these changes
Oct 23, 2026
Marvin Klein (MarvinKlein1508)
left a comment
Marvin Klein (MarvinKlein1508)
left a comment
Collaborator
There was a problem hiding this comment.
LGTM
Denis Voituron (dvoituron)
enabled auto-merge (squash)
October 23, 2026 11:31
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[Inputs] Implement
Autofocusfor Fluent input componentsEnhance multiple Fluent components with
Autofocuscapabilities, ensuring they automatically receive focus when rendered.This includes updates to the
OnAfterRenderAsyncmethod and the introduction of anIFluentComponentAutofocusinterface.Tests validate the behavior across components, ensuring a consistent user experience.
Demo
peek_1.mp4
Unit Tests
Added