FluentTextField data binding cannot override focused control

[daniel-lerch]

🐛 Bug Report

Changing the value of a variable bound to a FluentTextField via @bind-Value will have no effect if the text field is focused. This behavior is different than with <input type="text">.

💻 Repro or Code Sample

@using Microsoft.Fast.Components.FluentUI

<form @onsubmit="Continue">
    <FluentTextField @ref="_foreignLang" @bind-Value="foreignLang">Foreign language</FluentTextField>
    <FluentButton Appearance="@Appearance.Accent" type="submit">Continue</FluentButton>
</form>

@code {
    FluentTextField _foreignLang;
    string foreignLang = string.Empty;

    async void Continue()
    {
        foreignLang = string.Empty;
        await _foreignLang.Element.FocusAsync();
    }
}

1. Enter some text in the text field
2. Hit enter on your keyboard leaving the text field focused

🤔 Expected Behavior

The text field should be cleared and focused despite of other text fields.

😯 Current Behavior

The text field is not cleared. However, it will be cleared if you manually remove focus before submitting the form.

🔦 Context

The same approach with plain HTML works:

<form @onsubmit="Continue">
    <input type="text" @bind-value="foreignLang" />
    <button type="submit">Continue</button>
</form>

@code {
    ElementReference _foreignLang;
    string foreignLang = string.Empty;

    async void Continue()
    {
        foreignLang = string.Empty;
        await _foreignLang.FocusAsync();
    }
}

I want to ask the user for input and switch to the next element when the user proceeds. Therefore I have to clean the form.

🌍 Your Environment

• OS: Windows 10
• Browser: Microsoft.AspNetCore.Components.WebView.WindowsForms 6.0.300-rc.2.5513 (Blazor Hybrid)
• .NET and FAST Version: .NET 6.0.5, Microsoft.Fast.Components.FluentUI 1.4.0, @fluentui/web-components 2.5.0

[williamw2]

After investigation this seems to be an issue with the order of events in Blazor. In your repro example the Continue function is called before the foreignLang value is updated via the data binding. So, the user types enter, the Continue() method executes and then the foreignLang value is set to what the user had typed which via the binding resets the input's value.

This does not appear to be a FluentUI issue as you can see the same thing happen using the built in Blazor elements. For example:

<EditForm Model="@foreignLang" OnSubmit="@Continue">
    <InputText @ref="_foreignLang" @bind-Value="foreignLang">Foreign language</InputText>
    <button type="submit">Continue</button>
</EditForm>

@code {
    InputText? _foreignLang;
    string foreignLang = string.Empty;

    async void Continue()
    {
        foreignLang = string.Empty;

        await _foreignLang!.Element!.Value.FocusAsync();
    }
}