fix: Error when typing value in FluentCombobox

[JamesNK]

🐛 Bug Report

A bug was reported in Aspire when typing in the value in a combobox.

fail: Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'cZsXhk0i7RcEU_to02CxNizphfSvg7cyP6wWXOtvIAg'.
      System.AggregateException: One or more errors occurred. (The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.)
       ---> System.InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.
         at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
         at Microsoft.AspNetCore.Components.Forms.EditContextDataAnnotationsExtensions.DataAnnotationsEventSubscriptions.OnFieldChanged(Object sender, FieldChangedEventArgs eventArgs)
         at Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.RaiseChangedEventsAsync() in /_/src/Core/Components/List/ListComponentBase.razor.cs:line 582
         at Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.OnSelectedItemChangedHandlerAsync(TOption item) in /_/src/Core/Components/List/ListComponentBase.razor.cs:line 557
         at Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.ChangeHandlerAsync(ChangeEventArgs e) in /_/src/Core/Components/List/FluentCombobox.razor.cs:line 156
         at Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1.<>c__DisplayClass116_0.<<InputHandlerAsync>b__0>d.MoveNext() in /_/src/Core/Components/Base/FluentInputBaseHandlers.cs:line 73
         --- End of inner exception stack trace ---
         at Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1.InputHandlerAsync(ChangeEventArgs e) in /_/src/Core/Components/Base/FluentInputBaseHandlers.cs:line 73
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

💻 Repro or Code Sample

See dotnet/aspire#8343

🤔 Expected Behavior

No error.

😯 Current Behavior

Typing the last letter in a combobox value causes the error:

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

Possible workaround: dotnet/aspire#8450

[MrDeej]

I get almost the same exception when I close the app/tab/window

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.DisposeAsync() in /_/src/Core/Components/List/FluentCombobox.razor.cs:line 182
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass93_0.<<Dispose>g__HandleAsyncExceptions|0>d.MoveNext()

I have the Combobox inside a razor component in my mainlayout, without any magic, its almost a vanilla implementation.

@using System.ComponentModel
@inject YearSelectorService YearSelectorService
@implements IDisposable

<FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" Style="margin-left:8px; margin-right:8px">
    <FluentLabel>Selected year:</FluentLabel>
    <FluentCombobox Items="@YearSelectorService.SelectAbleYears"
    SelectedOption="@YearSelectorService.SelectedYear"
    TOption="Option<int>"
    OptionText="@(i=> i.Text)"
    OptionValue="@(i=>i.Value.ToString())" 
    Width="100px"
    SelectedOptionChanged="@(a=>YearSelectorService.SelectedYear = a)"
    />
</FluentStack>

@code {

    public void Dispose()
    {
        YearSelectorService.PropertyChanged -= YearSelectorPropertyChanged;
    }
    protected override void OnAfterRender(bool firstRender)
    {
        if(firstRender)
        {

            YearSelectorService.PropertyChanged += YearSelectorPropertyChanged;
        }
    }
    private void YearSelectorPropertyChanged(object? o, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(YearSelectorService.SelectedYear))
        {
            this.StateHasChanged();
        }
    }

}

The Dispose method is run ok, then the app closes, and after that an error appear in my Aspire dashboard for the Blazor app.

[vnbaaij]

@MrDeej I think this is a different thing.

If you want, we can examine what is happening in your situation. In that case open a new issue and make sure it has ready to run reproduction code or a repository we can clone.