MudSelectExtended - Virtualisation visual bug while scrolling

[migglu]

trafficstars

A small issue that I'm having is sporadically the selected value in a MudSelectExtended does not get highlighted in the selection box when using a MudSelectExtended with Virtualize="true" and this happens when scrolling through the options list is done with the scroll bar on the side. Scrolling with mouse or touchpad only occasionally reproduces the issue. If Virtualize is set to false the issue is no longer reproducible.

The minimal example would be like this:

<div>Selected version: @selectedVersion</div>
<MudSelectExtended
    Label="Select version"
    ItemCollection="versions"
    @bind-Value="selectedVersion"
    Virtualize="true" />

@code {

    private List<string> versions = new();
    private string selectedVersion;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        for (var i = 1; i <= 50; i++)
        {
            versions.Add($"Version {i}");
        }
    }
}

Issue can be seen here:

https://github.com/user-attachments/assets/8c5a0a6d-ae62-4880-ab62-172d25a214a0

Recovery from the issue (as can be seen in the video) is scrolling a little bit after which the selected value is highlighted again.

Issue is also reproducible in the last field of the Chips example (https://mudextensions.codebeam.org/mudselectextended#chips) where virtualization is also turned on:

https://github.com/user-attachments/assets/8817076c-8af7-433b-823a-b89b5ed13df9

Debugged this a little bit and the root cause seems like MudListExtended's HandleOnScroll https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions/blob/7.1.0/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListExtended.razor.cs#L1037 event is sometimes triggered before the MudVirtualize component has had the chance to update it's elements, so the CollectAllMudListItems call returns a list of the old items in UpdateSelectedStyles https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions/blob/7.1.0/CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListExtended.razor.cs#L1152 and that leads to it not calling SetSelected on the correct elements.

Unfortunately a way to fix this is not clear to me.

Let me know if I can assist any further.