search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.87k stars 376 forks source link

docs: fix Many Items in Autocomplete #1978

Open MarvinKlein1508 opened 6 months ago

MarvinKlein1508 commented 6 months ago

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

dvoituron commented 6 months ago

Not really ;-)

image

vnbaaij commented 6 months ago

Closed as not reproducible

MarvinKlein1508 commented 6 months ago

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

vnbaaij commented 6 months ago

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

dvoituron commented 6 months ago

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 commented 6 months ago

@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 image

dvoituron commented 6 months ago

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 commented 6 months ago

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

martinbu commented 6 months ago

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 commented 6 months ago

image Reproduced with the latest FireFox

dvoituron commented 6 months ago

Maybe related to this issue? https://github.com/dotnet/aspnetcore/issues/44357

vnbaaij commented 1 month ago

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 commented 1 month ago

tested this on 130.0.1, and the issue is still there image

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 image

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

dhazel commented 1 month ago

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.