fix: Page not responding in combobox from a list of Option<T> items

[danny-may]

🐛 Bug Report

If you enter a free text value into a combobox from a list of Option items the page will become unresponsive.

💻 Repro or Code Sample

On the demo site, change the text in the combobox to one that does not exist, and then click out of the combobox. The page will become unresponsive
https://www.fluentui-blazor.net/Combobox#fromalistofoptiontit

🤔 Expected Behavior

The page should not become unresponsive. I guess that it should either accept the inputted value as plaintext or reset to the previous value?

😯 Current Behavior

The page becomes unresponsive and requires killing by the browser

💁 Possible Solution

My guess would be that it cannot find the option which matches the input and goes into some kind of infinite loop

🔦 Context

I was trying to find an autocomplete-like component which only allows a single selection and has an async search function. I was trying out the behaviour of a few other components to see if any other worked well for this.

🌍 Your Environment

• OS & Device: Windows 11
• Browser Firefox 133.0
• .NET and Fluent UI Blazor library Version: No idea, whatever the demo site is using

[dvoituron]

This only seems to happen with the WASM version of the components (not in Blazor Server).

[dvoituron]

I was trying to find an autocomplete-like component which only allows a single selection and has an async search function. I was trying out the behaviour of a few other components to see if any other worked well for this.

You can use the FluentAutocomplete component to do that, with the attribute MaximumSelectedOptions="1"

[danny-may]

I was trying to find an autocomplete-like component which only allows a single selection and has an async search function. I was trying out the behaviour of a few other components to see if any other worked well for this.

You can use the FluentAutocomplete component to do that, with the attribute MaximumSelectedOptions="1"

That was what I used initially, but you end up with your selection showing up as a tag and can still type after it, which I didnt think looked great for how I wanted to use it.

Thats besides the point of this ticket though, I was just describing how I found the issue. I ended up making my own autocomplete for single selection scenarios which is pretty much the same as the existing one just without the tags

[dvoituron]

You can customize the FluentAutocomplete to display selected elements as “plain” text (rather than as a tag).
For example, using the following code

@* Template used with each Selected items *@
<SelectedOptionTemplate>
    <div style="white-space: nowrap;">
        @($"{context.FirstName} {context.LastName}")
    </div>
</SelectedOptionTemplate>

[danny-may]

Thats pretty neat, Ill give that a shot. Thanks!

[MarvinKlein1508]

I can confirm as well that this is only broken in the WASM variant. I've tested it in Firefox. Once I click out of the control my entire tab is frozen and doesn't work anymore until I do a manual refresh.

[pk9r]

I think the logic handling problem is probably in FluentCombobox and ListComponentBase. Even in Blazor Server, after clicking out of the combobox the page interactions are no longer working.

I am trying to debug this issue, there will be a PR. However, in the future, the logic of ListComponentBase should be carefully considered, it is very complicated and I am having some difficulties.

[pk9r]

fluentui-blazor/src/Core/Components/List/ListComponentBase.razor.cs

Lines 340 to 343 in eb5cd26

	if (Value is not null && (InternalValue is null || InternalValue != Value))
	{
	InternalValue = Value;
	}

In OnParametersSetAsync of ListComponentBase there is a code that ensures that SelectedOption will change the Value (input by the user), in case Value is not in Items, SelectedOption will be set to null/default (see Property InternalValue below)

fluentui-blazor/src/Core/Components/List/ListComponentBase.razor.cs

Lines 365 to 369 in eb5cd26

	if (SelectedOption == null && Items != null && OptionSelected != null)
	{
	TOption? item = Items.FirstOrDefault(i => OptionSelected.Invoke(i));
	InternalValue = GetOptionValue(item);
	}

Then the code to initially select an option. Pay attention to the condition, it's not just at initially, in this issue when the user enters a Value that is not in Items then SelectedOption is set to null and this condition is true. This will set SelectedOption to initially.
Now let me summarize what happens:
User Input "Twoaaa" -> Value is set to "Towaaa"
-> InternalValue != Value -> SelectedOptions is set to null -> SelectedOptions is set to "Two"
-> InternalValue != Value -> SelectedOptions is set to null -> SelectedOptions is set to "Two"
...

I will set Value to match InternalValue after SelectedOption is reset. So the comparison InternalValue != Value will no longer be true and the loop will not occur.

This combobox no longer causes the page to become unresponsive.

InternalValue Property:

fluentui-blazor/src/Core/Components/List/ListComponentBase.razor.cs

Lines 54 to 77 in eb5cd26

	protected string? InternalValue
	{
	get
	{
	return GetOptionValue(SelectedOption);
	}
	set
	{
	if (value != null && OptionValue != null && Items != null)
	{
	var item = Items.FirstOrDefault(i => GetOptionValue(i) == value);
	if (!Equals(item, SelectedOption))
	{
	SelectedOption = item;
	Value = value;
	// Raise Changed events in another thread
	RaiseChangedEventsAsync().ConfigureAwait(false);
	}
	}
	}
	}