I have a Blazor web page using MudBlazor, but MudSelect does not support virtualization. If I use a foreach loop to load the entire list, it causes the webpage to lag. Therefore, I turned to Blazor virtualization. Everything worked fine until I discovered that virtualization caused my webpage to have an abnormal height, often being tens to hundreds of times the original height, with the extra length being entirely blank. If I use Take to retrieve a small number of items, it works fine, but in this case, virtualization becomes useless because with such a small number of items, foreach works well, and I can even use a SelectAll box with the loop. Is there a way to fix this virtualization issue?
<MudSelect Variant="Variant.Outlined" Margin="Margin.Dense" T="string" MultiSelection="true" @bind-SelectedValues="@list" Adornment="Adornment.End">
<Virtualize Items="users">
<MudSelectItem Value="@context.id"/>
</Virtualize>
</MudSelect>
@code{
IEnumerable<string> list = new HashSet<string>();
IEnumerable<string> users = new HashSet<string>();
protected override void OnInitialized()
{
HashSet<string> hashSet = new HashSet<string>();
for (int i = 0; i < 1000; i++)
{
hashSet.Add(i.ToString());
}
users = hashSet;
}
}
Add a like this around the MudSelect and the problem is fixed:
<div style="height:55px;overflow-y:hidden;">
//MudSelect here
</div>