docs: fix Many Items in Autocomplete

[MarvinKlein1508]

This seems to be broken:
https://www.fluentui-blazor.net/Autocomplete

[dvoituron]

Not really ;-)

[vnbaaij]

Closed as not reproducible

[MarvinKlein1508]

@vnbaaij I've checked again. It works in Edge for me but not in Firefox

[vnbaaij]

Re-opening. Please mention those kind of details next time. Helps triaging.

[dvoituron]

This is due to Virtualize="true", but at the moment I don't know why it's OK with Edge but not with Firefox.

[joriverm]

@dvoituron : just gave this a go in firefox as it is my main browser. im getting a warning in the console when loading the page, saying it can't load a script :
Loading failed for the <script> with source “https://www.clarity.ms/tag/hnr14wvzj8”. [Autocomplete:1:1](https://www.fluentui-blazor.net/Autocomplete). maybe related? nvm, has to do with the firefox setting to stop content tracking

if not, i took a look at the DOM and it appears that the popup isn't getting filled in with fluent-option elements

[dvoituron]

Yep. Clarity is not linked to this problem.

I've seen that the "virtualization" part (this DOM) isn't filled in with Firefox. But I don't know why at the moment.

[dvoituron]

@martinbu Any idea why this problem only occurs with Firefox?

[martinbu]

I have seen the issue yesterday and did a quick debugging session but could not identify the the root cause yet.
What I have seen is that the LoadFilteredItemsAsync is called but always had a Count of zero in ItemsProviderRequest. Therefore, no options are returned... It seems that the Virtualize component calculates (OnBeforeSpaceVisible and OnAfterSpacerVisible) that there is no space to render the content. When setting the breakpoint during a debugging session at the correct point, the options also appear. Therefore, I think it is a timing issue. So in chromium based browsers the area to render the list is present before the space calculation. In Firefox the calculation is done before the "area to render" is available.

But that is currently a vague assumption. I haven't had time to look at it in detail yet.

[hevilhuy]

Reproduced with the latest FireFox

[dvoituron]

Maybe related to this issue? dotnet/aspnetcore#44357

[vnbaaij]

This is still an issue in the latest Firefox version. With the problem being a timing issue in the Virtualize component, this is not something that can be solved from our side, I think.

[joriverm]

tested this on 130.0.1, and the issue is still there

however, something funny/odd happened that i dont know if its related to the issue. when i added a delay (100ms) it showed the popup nicely... but the options are still gone haha

EDIT: if its in the base virtualize component then i agree, this might be for another team to fix

[dhazel]

Interestingly, I am seeing a very similar issue in Chrome/Edge after upgrading FluentUI from 4.10.0 to 4.10.1. The issue occurs when populating the dropdown via an async call. I will look into creating a new issue report because this thread here appears to be Firefox specific.