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.