fluentui-blazor
fluentui-blazor copied to clipboard
microsoft
fix: Many Items in Autocomplete in Firefox
This seems to be broken:
https://www.fluentui-blazor.net/Autocomplete
@vnbaaij I've checked again. It works in Edge for me but not in Firefox
Re-opening. Please mention those kind of details next time. Helps triaging.
This is due to Virtualize="true", but at the moment I don't know why it's OK with Edge but not with Firefox.
@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
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.
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.
Maybe related to this issue? https://github.com/dotnet/aspnetcore/issues/44357
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.
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
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.
