fix: FluentTreeView selection bug #2

[markoweb2]

🐛 Bug Report

Maybe this code is a wrong approach to using FluentTreeView, but considering it responds to ObservableCollection changes (or is it the button click triggering a re-render), then this selection issue ideally should not happen.
Basically when you add an item from code behind, that is already Selected, initially everything looks okay, but selecting another item does not clear the selection from the just added item.

💻 Repro or Code Sample

Create a new Blazor Web App in Visual Studio.
Set render mode to @rendermode="new InteractiveServerRenderMode(false)"
Install FluentUI nuget package and perform the setup steps.
Use this code on home page to introduce the bug:

@page "/"
@using System.Collections.ObjectModel

<PageTitle>Home</PageTitle>

<FluentTreeView>
    @foreach (var item in this.list)
    {
        <FluentTreeItem Text="@item.Name" Expanded="true">
            @foreach (var subitem in item.TestItems)
            {
                <FluentTreeItem Text="@subitem.Name" @bind-Selected=subitem.IsSelected />
            }
        </FluentTreeItem>
    }
</FluentTreeView>
<br />
<FluentButton Appearance="Appearance.Accent" OnClick="@onclick">Something</FluentButton>

@code
{
    private ObservableCollection<Root> list = new ObservableCollection<Root>() { new Root() { Name = "root" } };

    private void onclick(MouseEventArgs e)
    {
        this.list.First().TestItems.Add(new Test() { Name = "NewItem", IsSelected = true });
    }

    private class Root
    {
        public string Name { get; set; } = String.Empty;
        public ObservableCollection<Test> TestItems = new ObservableCollection<Test>() { new Test() { Name = "test 1" }, new Test() { Name = "test 2" } };
    }

    private class Test
    {
        public string Name { get; set; } = String.Empty;
        public bool IsSelected { get; set; }
    }
}

Attached entire repo:
BlazorApp1.zip

🤔 Expected Behavior

After clicking the button, selecting another item should clear the selection from the added item.

😯 Current Behavior

🔦 Context

Learning Blazor from scratch, this type of code is used all over in tutorials and examples, to generate content dynamically.
Perhaps this type of code does not work in this context and one needs to use the FluentTreeView.Items property instead, for data binding and TreeItem generation.
Actually, thinking harder about the situation, it does make sense that this doesn't work, since the FluentTreeView has not been informed about a selection change, so internally it's logic to track selected items does not match what is rendered.
But perhaps there is something that can be improved here, either internal logic to handle this situation or some new method to inform the FluentTreeView of selection changes from code behind. Because we can't use the FluentTreeView.CurrentSelected nor the FluentTreeView.SelectedItem from code behind in this context, to select the desired item.

If this is deemed to be the wrong approach, then please update the documentation (https://www.fluentui-blazor.net/TreeView) with proper examples of data binding and generating contents from a data source. Currently there is nothing to go by, which would immitate real world scenarios.

PS! Using @bind-InitiallySelected=subItem.IsSelected or just InitiallySelected=@subItem.IsSelected instead of @bind-Selected=subitem.IsSelected, does not change the behavior.
Nor does implementing INotifyPropertyChanged for the IsSelected property.

🌍 Your Environment

• OS = Windows
• Browser = Microsoft Edge, Google Chrome
• .NET and Fluent UI Blazor library Version = 8.0.10 and 4.10.2
  Visual Studio 2022 (17.11.5)

[vnbaaij]

As we say on the TreeItem page:

It is as you describe already why it is not working.

If this is deemed to be the wrong approach, then please update the documentation (https://www.fluentui-blazor.net/TreeView) with proper examples of data binding and generating contents from a data source. Currently there is nothing to go by, which would immitate real world scenarios.

We have not had any requests before about generating contents in a tree from a datasource. Could be a nice addition indeed. Will tink of an example. We do also take PRs, so if you have something already...

Closing this one as it is not an issue in the component

[markoweb2]

I think the problem with the documented NOTE is that no context is provided. So it is hard to wrap ones head around, where does it apply.
Looking back, yes I can now see that wording make sense and being applicable to my scenario, but only barely.

The mentioned SelectedItem property in the NOTE, belongs to FluentTreeView. As you can see in my code example, I am not using that property.
I am using the FluentTreeItem.Selected property instead, but it is still not working.

Using or binding to FluentTreeItem.InitiallySelected does not change the behavior either. But re-reading the documentation, I would think this property should make my provided example work. The fact that it doesn't is either a bug, or by design using foreach loop to generate FluentTreeItem-s and selecting an item via code breaks the intended behavior.

• It would be beneficial to add a code example (even if by using a link to this very github issue) to the documented NOTE, showing exactly what not to do and what type of code does not work with the FluentTreeView.SelectedItem and FluentTreeItem.Selected properties.
• And if using foreach loop to generate FluentTreeItem-s and doing any selection from code is not compatible, then this should also be better noted in the documentation. Perhaps even more strongly suggested that by default use the FluentTreeView.Items property for all dynamic generation. I would even move the With Items example to the first position and change the title to Dynamic generation via Items property

Anything that helps new programmers to write correct code right off the bat is beneficial. Honestly, I wasted quite a few hours going down the wrong rabbit hole, trying to make it work, when as it later turned out - it was impossible to make it work, had to use another approach entirely.

[vnbaaij]

Anything that helps new programmers to write correct code right off the bat is beneficial. Honestly, I wasted quite a few hours going down the wrong rabbit hole, trying to make it work, when as it later turned out - it was impossible to make it work, had to use another approach entirely.

Sorry to hear that. We do our best to make the documentation a good guide. With the experience on using (and building) the library we have, we might oversee the need of starters sometimes.
We are only a small team, doing this as a side project so any help with this is appreciated.

I'm adding below to the page. Please add more if you think it is needed.

When using a TreeView with dynamic items, always use th Items collection to define the tree structure. The FluentTreeItem component should only be used to define the tree nodes when the tree structure is static.