FluentAutoComplete 4.14.4 does not render the items in Edge

[Pau290]

🐛 Bug Report

The FluentAutoComplete component, suddenly stops rendering the dropdown items in Edge

💻 Repro or Code Sample

                <FluentAutocomplete TOption="string"
                                    Disabled=isLoading
                                    Autofocus="true"
                                    Label="@localizer["Nombre"]"
                                    Width="250px"
                                    MaxAutoHeight="200px"
                                    Placeholder="@localizer["Nombre"]"
                                    OnOptionsSearch="@OnSearchNombreAsync"
                                    MaximumSelectedOptions="1"
                                    MaximumOptionsSearch="250000"
                                    Virtualize="true"
                                    OptionText="@(item => item)"
                                    @bind-SelectedOptions="@PosiblesNombres" />

🤔 Expected Behavior

Display the items dropdown

😯 Current Behavior

Does not isplay the items dropdown

💁 Possible Solution

Using the app in Chrome with normality

🔦 Context

.NET 8,

<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.14.4" />
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.14.4" />

• OS & Device: Windows 11
• Browser: Microsoft Edge, v: Versión 151.0.4129.59 (Compilación oficial) (64 bits)

[vnbaaij]

This is the same issue as the one you commented on, right? If so, I am closing this as a duplicate

[Pau290]

Hi, not exactly, the other issue I commented is specific for .NET 10, as I find it happens in .NET 8 also, and only on Edge

Please correct me in any of the threads, let me know if this is general issue or specific to my code

[Pau290]

Excuse me, I didn't add code example, here is a simple demo to reproduce the issue:

@page "/test"
@inherits BaseComponent
@inject PacientesService Service
@inject IStringLocalizer<Resources> localizer

<FluentAutocomplete TOption="string"
                    Disabled=isLoading
                    AutoComplete="off"
                    Label="@localizer["PrimerApellido"]"
                    Width="250px"
                    MaxAutoHeight="200px"
                    Placeholder="@localizer["PrimerApellido"]"
                    OnOptionsSearch="@OnSearchApellido1Async"
                    MaximumSelectedOptions="1"
                    MaximumOptionsSearch="250000"
                    Virtualize="true"
                    OptionText="@(item => item)"
                    @bind-SelectedOptions="@PosiblesApellidos1" />

@code {

    private SearchPacientesValuesModel SearchValues { get; set; } = new();

    private IEnumerable<string> PosiblesApellidos1 = [];


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            UIState.LabelText = localizer["Test"];

            await InitializeSearchingValues();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task InitializeSearchingValues()
    {
        await RunWithLoading(async () =>
        {
            SearchValues = await Service.GetSearchValues();
        });
    }

    private async Task OnSearchApellido1Async(OptionsSearchEventArgs<string> e)
    {
        var allApellidos1 = SearchValues.DistinctApellidos1;
        e.Items = allApellidos1.Where(i => i.Contains(e.Text, StringComparison.OrdinalIgnoreCase)).OrderBy(i => i);

        await Task.CompletedTask;
    }
}

and the class is a simple holder for names and lastnames:

public class SearchPacientesValuesModel
{
    public List<string> DistinctNombres { get; set; } = [];

    public List<string> DistinctApellidos1 { get; set; } = [];
}

---

Result in Edge:

---

Result in chrome:

Thanks in advance for your time

[Pau290]

Hi, I saw the motive why it crashes and stops rendering the items

I add this basic code sample from your demo web site, that gets it working, and by adding two attributes, it stops working

@page "/test"
@inject DataSource Data

<FluentAutocomplete TOption="Country"
AutoComplete="off"
Autofocus="true"
Label="Select a country"
Width="250px"
MaxAutoHeight="@(AutoHeight ? "200px" : null)"
Placeholder="Select countries"
OnOptionsSearch="@OnSearchAsync"
MaximumSelectedOptions="1"
OptionText="@(item => item.Name)"
@bind-SelectedOptions="@SelectedItems" />

Selected: @(String.Join(" - ", SelectedItems.Select(i => i.Name)))

When the MaxAutoHeight attribute is set, the component adapts its height in relation to the selected elements.

@code { bool AutoHeight = false; IEnumerable SelectedItems = Array.Empty();

private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
{
    var allCountries = await Data.GetCountriesAsync();
    e.Items = allCountries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                          .OrderBy(i => i.Name);
}

}

this is fine:

Now I simply add these attributes to the component: (by adding any of them it breaks)

                MaximumOptionsSearch="10"
                Virtualize="true"

I need specially the virtualize, but I guess I can adapt

the result after adding any of these attributes:

Please let me know if this is expected behavior or is something should work correctly

Thanks, kind regards

[moa-netree]

Hi, I'm running into the same issue.

I'm not sure it's directly related, but in my case it seems to correlate with the browser version:

Edge 150.x works as expected, even with Virtualize="true".
Edge 151.x stops working. I have to remove Virtualize to get it rendering again.

I tested this on the same machine. The current version I have that works is: Edge 150.0.4078.110 (Official build) (64-bit).
I see the same outcome in Chrome as well, with the different versions.

Could anyone else confirm whether they see the same version dependency?

[MarvinKlein1508]

This might be the same as #1978

[bLinMil]

I am getting this behavior with Edge version 151.0.4129.59 and Fluent Blazor version 4.14.2. Dotnet 10

This is the autocomplete I am using. Upon clicking the autocomplete, sometimes I see the items in the select list sometimes I do not

For context, the application stayed on version 4.14.2 for a while with no issues. Only recently has the issue arose

<FluentAutocomplete TOption="Operation"
                    Width="300px"
                    OnOptionsSearch="OnSearchAsync"
                    Style="max-height:200px"
                    Multiple="true"
                    Virtualize="true"
                    OptionValue="i => i.OperationId.ToString()"
                    OptionText="i => i.OperationName"
                    ItemSize="25"
                    MaximumSelectedOptions="int.MaxValue"
                    MaximumOptionsSearch="int.MaxValue"
                    Placeholder="Select Operations"
                    KeepOpen="true"
                    Items="OperationHistoryViewModel.OperationList!.AsEnumerable()"
                    SelectedOptions="_selectedOperations"
                    SelectedOptionsChanged="OnOperationsChanged">
</FluentAutocomplete>

[m-collin]

Hi, I ran into the same issue and tried to figure out where it might be coming from.

1. Backup Site works (Chromium 151, Edge and Chrome, as well as Firefox 153), running v4.12.2+06ae5f59 on .NET 9.0.18, so either SDK 9.0.316 or 9.0.119.
2. Demo Site does not work in any of the browsers/versions mentioned above.

I created a sample project containing only the Autocomplete sample from the demo site and ran it with SDK versions 9.0.119 and 9.0.316, using Fluent UI Blazor NuGet packages V 4.12.1 and V 4.13. Unfortunately, neither version worked.

To me, this feels more like a regression introduced after the unreleased V 4.12.2, possibly in conjunction with the recent Chromium security fixes/updates, or that someone tried to fix whatever it is in that version. The backup site running 4.12.2 works even in Firefox.

Happy to help if there is any testing todo

[p-sco]

I am also having the same issue, both in Chrome and Edge. Seems like it might have to do with having Virtualize=true on the autocomplete components preventing the shadow dom from populating. This must be due to a recent security update in these browsers, because I haven't switched package versions (on 4.13.2, .NET 8) and the app has been running fine for months until two days ago.

I will try re-deploying with virtualization off and report if that fixes the issue. Seems inconsistent when the dropdowns actually populate. In the meantime, this is a critical bug that essentially prevents apps from working correctly. If it can't be fixed in Fluent itself, hopefully if it's on the browser's side they can remedy this soon.

[DanielCordell]

I think I've found the culprit - a change recently added to chrome that would have just been rolled out in 151.0.7922.109 - but put into nightly June 4.

https://chromium.googlesource.com/chromium/src/+/b3cbe4e3257d9ad9bb6aac715d009feac5818b97

Return empty styles for getComputedStyle() outside flat tree

This is per spec[1] and aligns with the behavior of Firefox

I bisected the nightly tags and this was the full changelog between the working and non-working versions https://chromium.googlesource.com/chromium/src/+log/546989672bf9054f80801c5a600deb4340574b68..08a65eb21a80e6da6ea00143a4b1c824c5f86a7c?n=1000

The fact that it says "aligns with firefox" means that this #1978 was actually an omen!

Not sure what the fix is here - but this is quite concerning, more and more people are going to find that their stuff stops working.

Possibly related: dotnet/aspnetcore#61384 dotnet/aspnetcore#61384