microsoft / microsoft/fluentui-blazor

[dev-v5] fix: conditional AutoFocus

Open
#4,699 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:fluent-ui-web-components bug v5
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;
}
  1. Run code
  2. Press the switch
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.