fix: Updating EditContext state in FluentSelect

[SteveSandersonMS]

🐛 Bug Report

FluentSelect never marks the bound field as modified in the edit context.

💻 Repro or Code Sample

@using Microsoft.FluentUI.AspNetCore.Components

<EditForm Model="@this">
    <p>Modified: @(context.IsModified())</p>

    <FluentSelect TOption="MyThing" @bind-SelectedOption="@currentThing"
        Items="@AllThings" OptionText="@(x => x.DisplayText)" />

    <FluentTextField @bind-Value="@someString" />
</EditForm>

@code {
    MyThing? currentThing;
    string? someString;
    MyThing[] AllThings = new[] { new MyThing(1, "One"), new MyThing(2, "Two") };

    record MyThing(int Id, string DisplayText);
}

🤔 Expected Behavior

If you change the FluentSelect dropdown, then "Modified" should become true. Notice that this does happen correctly if you change the text in the FluentTextField box.

😯 Current Behavior

FluentSelect never tells the editcontext that the bound value was modified, so "Modified" remains false.

This breaks many scenarios around showing "save" only if the form is edited, or warning the user not to exit if the form has unsaved changes.

💁 Possible Solution

As a (rather unpleasant) workaround, the developer could add:

@bind-SelectedOption:after="@(() => { context.NotifyFieldChanged(FieldIdentifier.Create(() => currentThing)); })"

However this should not be necessary as form components should notify the containing EditContext when they mutate the bound field.

[SteveSandersonMS]

I haven't checked all the other FluentUI form components, but they should all notify the EditContext in this way. Some of them already do by virtue of inheriting from Blazor's built-in components.

Sidenote: FluentSelect seems not to be listed in the docs sidebar, and I could only find this page by using the "search" feature.

[vnbaaij]

Hi Steve,

This is (indeed) caused by the list components (Listbox, Select, Combobox and AutoComplete) not inheriting form FluentInputBase (which copies Blazor's built-in mechanism for doing this). That is also the reason why we haven't listed them in the 'Form & Inputs' section yet and they are still listed in the general 'Components' section. The search pointed you to the right page.

We definitely want to change this and it is on our 'ToDo' list. I have started a branch for it locally and will continue working on it.