microsoft / microsoft/fluentui-blazor
[dev-v5] fix: conditional AutoFocus
Nobody has claimed this yet.
- Dominant language
- C#
- Stars
- 4.8k
- Forks
- 483
- Avg merge
- 14h 41m
- Merged PRs (30d)
- 68
Description
🐛 Bug Report
The AutoFocus parameter does not work when a component is being rendered conditionally.
💻 Repro or Code Sample
<FluentSwitch @bind-Value="showInput" Label="Show Input" />
<br />
@if (showInput)
{
<FluentTextInput @bind-Value="test" Label="Test" Autofocus />
}
@code {
private string test = string.Empty;
private bool showInput;
}
- Run code
- Press the switch
- Notice that the input won't get focused
🤔 Expected Behavior
The input should become focused once it is visible
😯 Current Behavior
The input will become visible but won't be set in focus.
💁 Possible Solution
🔦 Context
If you just render the component without the if then it actually will get focused.
🌍 Your Environment
- OS & Device: Windows 11 64 Bit
- Browser latest Firefox, Chrome, Edge
- latest dev-v5 branch
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the FluentTextInput component and its Autofocus behavior, using the Razor reproduction with FluentSwitch and conditional rendering. Reproduce the issue by toggling showInput, then trace how focus is applied when the input becomes visible. Done means the conditionally rendered input receives focus consistently, while the existing always-rendered behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100