fix: FocusAsync() method throws exception in FluentAutocomplete

[larahina25]

🐛 Bug Report

When calling the FocusAsync() method on a FluentAutocomplete component, an unhandled exception is thrown. The same goes for the FocusAsync(bool) method.

💻 Repro or Code Sample

@page "/"

<PageTitle>Home</PageTitle>

<FluentAutocomplete TOption="Customer" @ref="_autocomplete" @bind-SelectedOption="_value" OnOptionsSearch="@OnSearchAsync" Multiple="false" Label="Autocomplete" Width="300px"/>

<FluentButton OnClick="@(() => _autocomplete.FocusAsync())" Style="margin-top:10px">Focus Autocomplete</FluentButton>

@code {
	FluentAutocomplete<Customer> _autocomplete = null!;
	private Customer _value = Customer.Customers[0];

	private void OnSearchAsync(OptionsSearchEventArgs<Customer> e)
	{
		e.Items = Customer.Customers
			.Where(c => c.Name.Contains(e.Text, StringComparison.InvariantCultureIgnoreCase))
			.ToList();
	}

	private struct Customer
	{
		public static readonly Customer[] Customers =
		[
		new() { Id = 1, Name = "Alice" },
		new() { Id = 2, Name = "Bob" },
		new() { Id = 3, Name = "Charlie" },
		new() { Id = 4, Name = "Diana" },
		new() { Id = 5, Name = "Eve" },
	];
		public int Id { get; set; }
		public required string Name { get; set; }

		override public string ToString() => Name;
	}
}

Click on the button. This calls the FocusAsync() method which fails with an exception.

🤔 Expected Behavior

The method should execute without an exception and focus the underlying text field component.

😯 Current Behavior

The method fails with following exception:

System.InvalidOperationException: ElementReference has not been configured correctly.
   at Microsoft.AspNetCore.Components.ElementReferenceExtensions.GetJSRuntime(ElementReference elementReference)
   at Microsoft.AspNetCore.Components.ElementReferenceExtensions.FocusAsync(ElementReference elementReference, Boolean preventScroll)
   at Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1.<FocusAsync>d__99[[System.String, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext() in /_/src/Core/Components/Base/FluentInputBase.cs:line 371
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_1(Object state)
   at System.Threading.QueueUserWorkItemCallbackDefaultContext.Execute()
   at System.Threading.ThreadPoolWorkQueue.Dispatch()
   at System.Threading.ThreadPool.BackgroundJobHandler()

💁 Possible Solution

I've already reported a similar issue for the FluentDatePicker (#4166 ), which is already fixed. I hope this solution can be adapted also for the autocomplete component.

🔦 Context

I try to programmatically focus a FluentAutocomplete component.

🌍 Your Environment

• OS & Device: Windows
• Browser: Microsoft Edge
• .NET and Fluent UI Blazor library Version: 9.0.9 and 4.12.1
• Visual Studio 2022 (17.14.2)

[MarvinKlein1508]

This is most likely the same issue as in #4166 . I will take a look on this and provide a fix for it.