[dev-v5] fix: can't select value directy in `FluentAutocomplete` when `Multiple` is `false`

🐛 Bug Report

If a FluentAutocomplete has a pre defined/selected value then changing this value to anything which is not provided by the dropdown is pretty hard. It requires the user to manually clear the box before he can search again.

💻 Repro or Code Sample

@page "/Debug/Test"

<div style="padding: 1rem; overflow-y: auto;">
    <h2>FluentAutoComplete</h2>

    <p>When you click on this component then you are seeing 3 cities. But you can't type Sydney to select it. Only once you manually cleared the component by either backspace or via the button.</p>
    <FluentAutocomplete TValue="CompanyLocation"
                        TOption="CompanyLocation"
                        OnOptionsSearch="OnSearchCompanyLocationsAsync"
                        OptionSelectedComparer="CompanyLocationComparer.Instance"
                        OptionText="(o => o.Name)"
                        Multiple="false"
                        Width="100%"
                        MaximumOptionsSearch="3"
                        Label="Location"
                        @bind-SelectedItem="Input.CompanyLocation" />

    <p>Selected: @(Input.CompanyLocation?.Name ?? "<NULL>")</p>
</div>



@code {

    Task OnSearchCompanyLocationsAsync(OptionsSearchEventArgs<CompanyLocation> e)
    {
        var locations = new List<CompanyLocation>
        {
            new CompanyLocation { Id = 1, Name = "New York" },
            new CompanyLocation { Id = 2, Name = "London" },
            new CompanyLocation { Id = 3, Name = "Tokyo" },
            new CompanyLocation { Id = 4, Name = "Sydney" }
        };

        e.Items = locations;
        return Task.CompletedTask;
    }

    
    public MyInput Input { get; set; } = new()
    {
        CompanyLocation = new CompanyLocation { Id = 2, Name = "London" },
    };
    public MyInput InputSelect { get; set; } = new();

    public class MyInput
    {

        public CompanyLocation? CompanyLocation { get; set; }
    }

    public class CompanyLocation
    {
        public int Id { get; set; }
        public required string Name { get; set; }
    }

    public class CompanyLocationComparer : IEqualityComparer<CompanyLocation>
    {
        public static CompanyLocationComparer Instance { get; } = new CompanyLocationComparer();

        public bool Equals(CompanyLocation? x, CompanyLocation? y)
        {
            if (ReferenceEquals(x, y))
            {
                return true;
            }

            if (x is null || y is null)
            {
                return false;
            }

            return x.Id == y.Id;
        }

        public int GetHashCode(CompanyLocation obj) => HashCode.Combine(obj.Id);
    }
}

🤔 Expected Behavior

I expect the component to go into search mode when I press any key

😯 Current Behavior

You can't search anything until you clear the value manually. This makes it harder for users to change values in this state.

💁 Possible Solution

Perhaps the component could set itself to default when you start typing. Or enter a different mode to keep the value but allow the user to search without clearing it first.

🔦 Context

The debug cases from #4716 can be used to validate behaviour change accross the entire FluentAutocomplete component.

🌍 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]