How to highlight list item inside a nested list in MudBlazor? - mudblazor

Question

I want to be able to highlight a <MudListItem> inside a <NestedList> using the property SelectedValue
This sample code works like a charm
<MudList Clickable="true" SelectedValue="3">
<MudListItem Value="1">Item 1</MudListItem>
<MudListItem Value="2">Item 2</MudListItem>
<MudListItem Value="3">Item 3</MudListItem> <-- cool! it is highlighted
</MudList>
However, in this markup, the selected value doesn't get highlighted
<MudList Clickable="true" SelectedValue="3">
<MudListItem Text="GroupOne" InitiallyExpanded="true">
<NestedList>
<MudListItem Value="1">Item 1</MudListItem>
<MudListItem Value="2">Item 2</MudListItem>
</NestedList>
</MudListItem>
<MudListItem Text="GroupTwo" InitiallyExpanded="true">
<NestedList>
<MudListItem Value="3">Item 3</MudListItem> <-- nope, doesn't get highlighted
<MudListItem Value="4">Item 4</MudListItem>
</NestedList>
</MudListItem>
</MudList>

Answer 1

It seems that the MudList instance isn't able to see the items due to them being wrapped in a NestedList.
As a workaround, you can try highlighting an item programmatically, based on the SelectedValue, by assigning a SelectedItem value, when the component is first rendered.
Example:
https://try.mudblazor.com/snippet/cOQQaWvOqBoBxsAf
<MudList #ref=#list Clickable="true" SelectedValue="3">
<MudListItem Text="GroupOne" InitiallyExpanded="true">
<NestedList>
<MudListItem #ref=#items[0] Value="1">Item 1</MudListItem>
<MudListItem #ref=#items[1] Value="2">Item 2</MudListItem>
</NestedList>
</MudListItem>
<MudListItem Text="GroupTwo" InitiallyExpanded="true">
<NestedList>
<MudListItem #ref=#items[2] Value="3">Item 3</MudListItem>
<MudListItem #ref=#items[3] Value="4">Item 4</MudListItem>
</NestedList>
</MudListItem>
</MudList>
#code {
private MudList list;
private MudListItem[] items = new MudListItem[4];
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
var itemToSelect = items.FirstOrDefault(x => x.Value.Equals(list.SelectedValue));
if (itemToSelect != null)
{
list.SelectedItem = itemToSelect;
StateHasChanged();
}
}
}
}