[dev-v5] fix: Cannot clear value in FluentAutocomplete

[MarvinKlein1508]

🐛 Bug Report

When you run the FluentAutcomplete in @bind-Value mode then you can't clear the component when the value is pre-defined or has been set from outside the component.

💻 Repro or Code Sample

 <FluentAutocomplete TOption="User"
                     TValue="int?"
                     Width="100%"
                     Label="@($"Bind to an Int32 (SelectedUserId: {SelectedUserId})")"
                     Multiple="false"
                     OnOptionsSearch="@(args => { args.Items = User.GetUsers().Where(u => u.Name.StartsWith(args.Text, StringComparison.OrdinalIgnoreCase)); return Task.CompletedTask; })"
                     OnSetValue="@(args => args.Item = User.GetUsers().FirstOrDefault(u => u.Id == args.Value))"
                     OptionText="@(item => item?.Name)"
                     OptionValue="@(item => item?.Id)"
                     @bind-Value="@SelectedUserId" />
 <FluentButton OnClick="@(e => SelectedUserId = 3)">
     Set SelectedUserId to 3
 </FluentButton>

https://v5.fluentui-blazor.net/Lists/Autocomplete/Debug

1. Click Set SelectedUserId to 3

2. Click the x to clear the input

3. See that SelectedUserId is still being displayed as 3

4. Change int? SelectedUserId { get; set; } to int? SelectedUserId { get; set; } = 2;

5. See the user is selected on page load

6. Click the x to clear the input

7. See that SelectedUserId is still being displayed as 2

🤔 Expected Behavior

The id should be set to null

😯 Current Behavior

The id won't be set

💁 Possible Solution

🔦 Context

As a workaround you can select any user from the drop down first and then clear the input then it the SelectedUserId will be set to null correctly.

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