Cannot Programatically Select MudTreeView

Question

This example is a slight variation of the MudBlazor examples: It contains of a tree, where I programmatically try to select the "content" node:

<MudPaper Width="300px" Elevation="0">
    <MudTreeView @bind-SelectedValue="SelectedValue" Hover="true">
        <MudTreeViewItem @bind-Expanded="@folderOneExpanded" Value="@(".vscode")" Icon="@(folderOneExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
            <MudTreeViewItem Value="@("tasks.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
        </MudTreeViewItem>
        <MudTreeViewItem @bind-Expanded="@folderTwoExpanded" Value="@("content")" Icon="@(folderTwoExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("logo.png")" Icon="@Icons.Custom.FileFormats.FileImage" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Selected item: @SelectedValue</MudText>

    string SelectedValue { get; set; }
    bool folderOneExpanded;
    bool folderTwoExpanded;

    protected override void OnInitialized()
    {
        SelectedValue = "content";
    }

(Try interactive example)

However when I run the program, the content node is not selected, even though everything else looks like it should be.

Why is that? How do I programmatically select nodes in a MudTreeView?

Other variants that do not work:

<MudTreeView SelectedValue="content" T="string">

<MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" Selected="true"/>

Answer 1

Assign Activated to true on MudTreeViewItem you want to get selected. Then on the first render, call the StateHasChanged method if you want to do it after the component has been initialized. This should do the trick.

Example

Here's a modified version of your code:

<MudPaper Width="300px" Elevation="0">
    <MudTreeView @bind-SelectedValue="SelectedValue" Hover="true">
        <MudTreeViewItem @bind-Expanded="@folderOneExpanded" Value="@(".vscode")" Icon="@(folderOneExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
            <MudTreeViewItem Value="@("tasks.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
        </MudTreeViewItem>
        <MudTreeViewItem Activated=@ContentSelected @bind-Expanded="@folderTwoExpanded" Value="@("content")" Icon="@(folderTwoExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("logo.png")" Icon="@Icons.Custom.FileFormats.FileImage" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Selected item: @SelectedValue</MudText>

@code {
    string SelectedValue { get; set; }
    bool ContentSelected { get; set; }
    bool folderOneExpanded;
    bool folderTwoExpanded;

    protected override void OnInitialized()
    {
        ContentSelected = true;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
            StateHasChanged();
    }
}

https://try.mudblazor.com/snippet/GuQmOyvzQshYmJie