Problem Description & Demo
I'm making a Blazor UI using the Fluent UI Library, and I'm having some problems with the FluentTreeView. It seems that only the root node can be toggled (expanded/collapsed), while attempting to toggle any descendant node causes a minor UI glitch and remains as it was.
Code
In WorkSequencePage.razor:
<FluentTreeView Items="@_treeViewItems" @bind-SelectedItem="_selectedItem"><ItemTemplate><span class="anchor" @onclick="() => ViewModel.FocusWork(context.Text)">@context.Text</span> @if (context.Items is not null && context.Items.Any()) {<span style="color: var(--bs-secondary); margin: 0 4px;"> [@context.Items.Count() @(context.Items.Count() == 1 ? "child" : "children")]</span> }</ItemTemplate></FluentTreeView>In WorkSequencePage.razor.cs:
public partial class WorkSequencePage{ private ObservableCollection<ITreeViewItem> _treeViewItems = []; private ITreeViewItem? _selectedItem; protected override async Task OnInitializedAsync() { ViewModel.PropertyChanged += OnViewModelPropertyChanged; await ViewModel.InitAsync(); await base.OnInitializedAsync(); } private void OnViewModelPropertyChanged(object? sender, PropertyChangedEventArgs e) { if (e.PropertyName == nameof(ViewModel.RootNode)) { UpdateTree(); } } private void UpdateTree() { _treeViewItems.Clear(); _treeViewItems.Add(ParseTreeViewItem(ViewModel.RootNode)); StateHasChanged(); return; ITreeViewItem ParseTreeViewItem(WorkSequenceNode node) { var ret = new TreeViewItem(node.WorkId.ToString(), node.Children.Select(ParseTreeViewItem)) { Expanded = true }; if (node.WorkId == ViewModel.FocusedWorkId) { _selectedItem = ret; } return ret; } }}What I've Tried
- Not setting the
Expandedproperty when constructing myTreeViewItems- all that does is initialise them as collapsed, meaning I can't toggle them open to see the data. - Listening to
OnExpandedChangeand inverting the value ofExpandedwhen that event fires - no effect - Changing the
LazyLoadItemsproperty on theFluentTreeView- no effect - Explicitly declaring a unique ID in
TreeViewItem's constructor - allows me to set other items as the selected item (undesired), but does not affect toggling
