fix: wrong validation state in FluentAutoComplete

🐛 Bug Report

When you set the Required parameter to true for the FluentAutocomplete component then the UI behaves wrong

• There is no validation message being shown
• The input gets the invalid state although there has been a value selected

💻 Repro or Code Sample

@page "/Debug/Test"
@using static FluentUI.Demo.SampleData.Olympics2024
@layout FluentUI.Demo.Client.Layout.EmptyLayout

<h3>Test</h3>


<div>Selected: <b>@string.Join("; ", SelectedCountries.Select(c => c.Name))</b></div>

<FluentAutocomplete TOption="Country"
                    TValue="string"
                    Width="100%"
                    Label="Select countries"
                    Placeholder="Type to search..."
                    OnOptionsSearch="@OnSearchAsync"
                    Required="true"
                    OptionText="@(item => item.Name)"
                    OptionDisabled="@(e => e.Code == "au")"
                    @bind-SelectedItems="@SelectedCountries" />
@code
{
    IEnumerable<Country> SelectedCountries { get; set; } = [];

    Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
    {
        e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                           .OrderBy(i => i.Name);

        return Task.CompletedTask;
    }
}

1. Click on the control
2. Click outside of the control
3. No validation message is being shown
4. The input gets the red invalid border

1. Click on the control
2. Select an item
3. Click outside the control
4. The input gets the red invalid border

🤔 Expected Behavior

I expect a validation message to show up and that the invalid red border is only visible when the control is in an invalid state.

😯 Current Behavior

🌍 Your Environment

• OS & Device: Windows 11 64 Bit
• Browser latest Firefox, Edge and Chrome
• latest dev-v5 branch

Start with the supplied Razor repro and reproduce the Required=true behavior in FluentAutocomplete on the dev-v5 branch. Inspect the component's validation and selected-item state handling; done means an empty control shows a validation message, while a selected item is not shown with an invalid border.