fix: Cyclical, uncontrolled input value changes when using Fast input components in Blazor Server

[MackinnonBuck]

🐛 Bug Report

When using Blazor server (particularly when there is high latency between the server and the browser), Fast input controls may rapidly cycle between values previously provided by the user.

The most straightforward example of this is when using the <FluentRadioGroup> and <FluentRadio> components, but #152 seems to indicate that other Fast input components are impacted by this bug as well.

If the user clicks two radio buttons before the server is able to handle the first click and re-render the parent component, then the component gets stuck in a loop, cycling between having the first and second radio options selected. If you then click a third radio button as this is happening, that button gets added to the cycle.

I haven't been able to get to the bottom of why this is happening, but I have a theory:

1. The user clicks the first radio button, and the selection is sent to the server.
2. The server re-renders the form (e.g., because a ValueChanged callback was registered) and sends off a new render batch to the browser.
3. While the new render batch is in transit, the user clicks the second radio button. The new selection is sent to the server.
4. The render batch from the first re-render gets received, changing the selected radio button back to the first one. Since the radio group's value has just changed, the new selection is sent to the server.
5. The render batch from the second re-render gets received, changing the selected radio button back to the second one. Since the radio group's value has just changed, the new selection is sent to the server.
6. The state of the world is exactly the same as it was in step 4, so an infinite loop is created.

It should be noted that the <InputRadio> component from Microsoft.AspNetCore.Components.Forms does NOT exhibit this behavior.

Screen recording:

fast_blazor_inf_loop.mp4

💻 Repro or Code Sample

1. Create a new Blazor Server project.
2. Add a package reference to Microsoft.Fast.Components.FluentUI, version 2.0.2.
3. Replace the code in Index.razor with the following:

@page "/"

<FluentRadioGroup ValueChanged="@(() => { /* No-op */ })">
    <FluentRadio Value="1">1</FluentRadio>
    <FluentRadio Value="2">2</FluentRadio>
    <FluentRadio Value="3">3</FluentRadio>
</FluentRadioGroup>

@code {
    protected override bool ShouldRender()
    {
        // Simulate a laggy render (or a late response).
        Thread.Sleep(500);
        return true;
    }
}

4. Run the project. Click the first two radio buttons in quick succession to make the bug occur.

🤔 Expected Behavior

When the UI finishes rendering, the second radio button is selected.

😯 Current Behavior

The UI continuously re-renders, alternating between having the first and second radio buttons selected.

💁 Possible Solution

Don't notify .NET about changes to radio button selection unless they were initiated by a click (or touch) event.

🌍 Your Environment

• OS & Device: Windows 11
• Browser: Microsoft Edge, Google Chrome
• .NET version: 6.0
• FAST version: Tried 1.1.0 and 2.0.2, the bug reproduced on both.