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.23k stars 294 forks source link

docs: fix Many Items in Autocomplete #1978

Open MarvinKlein1508 opened 2 weeks ago

MarvinKlein1508 commented 2 weeks ago

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

dvoituron commented 2 weeks ago

Not really ;-)

image

vnbaaij commented 2 weeks ago

Closed as not reproducible

MarvinKlein1508 commented 2 weeks ago

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

vnbaaij commented 2 weeks ago

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

dvoituron commented 2 weeks 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 2 weeks 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 2 weeks 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 2 weeks ago

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

martinbu commented 2 weeks 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 days ago

image Reproduced with the latest FireFox

dvoituron commented 4 days ago

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