fix: FluentTreeView selection bug

[markoweb2]

🐛 Bug Report

When using data binding, first click to select an item works.
Second click, to select another item, flashes the blue selection marker briefly, then clears the selection. (first item stays selected)
Third click works and selection moves to another item. Then the bug repeats.

💻 Repro or Code Sample

Create 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:

<PageTitle>Home</PageTitle>

<FluentTreeView Items="@list">
</FluentTreeView>

@code
{
    private List<TreeViewItem> list = new List<TreeViewItem>() { new TreeViewItem() { Text = "test 1" }, new TreeViewItem() { Text = "test 2" }, new TreeViewItem() { Text = "test 3" } };
}

Entire repo also attached:
BlazorApp1.zip

🤔 Expected Behavior

The second click should change the selection normally.

😯 Current Behavior

💁 Possible Solution

Not sure if this is anyway related to using the default bootstrap template. Perhaps some css or javascript interferes. (if so, needs to be made to work with this default Visual Studio template)
Could also be a flat out bug in FluentTreeView.

🔦 Context

Show stopper issue, can't continue with my project. And I haven't even gotten further than just the home page (where I need the TreeView).

🌍 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]

It can be reproduced by pasting the code example in out demo environment as well.

I'm not sure yet on what is causing this but there is an easy workaround for now. Just change it to:

<PageTitle>Home</PageTitle>

<FluentTreeView Items="@list" @bind-SelectedItem="@SelectedItem">
</FluentTreeView>

@code
{
    private ITreeViewItem? SelectedItem;
    private List<TreeViewItem> list = new List<TreeViewItem>() { new TreeViewItem() { Text = "test 1" }, new TreeViewItem() { Text = "test 2" }, new TreeViewItem() { Text = "test 3" } };
}

(so add and bind to SelectedItem)
With this change, the tree works as expected in the demo and in the Bootstrap standard template as well.

ps. we have 100% code copied Fluent versions of the Standard templates. Everything is already set up for you. I don't see a lot of sense in using Fluent in the Bootsrap based scenario (but maybe that is just me)

[markoweb2]

Thank you for the prompt workaround :)
Looking forward to a fixed version. (not knowing your release schedules, should this take a long while, it would be wise to mention this workaround in the FluentTreeView documentation/UI demo page)

I am aware of the Fluent templates, but I found out about them well after starting my project (templates do not exist in Visual Studio by default). Not looking forward to recreating the project from scratch at this time. Also kind of like the look of the boostrap navmenu.

[vnbaaij]

We don't have a fixed release schedule.

Not sure if we need to add anything to the docs about this. I can't imagine a lot of people are using a TreeView without actually binding to the SelectedItem. You have been the first to report this ever.

I didn't mean to imply you should restart or rework your project to use our templates. There would be nothing to gain from that. I meant you could use it for when starting something new (or when submitting an issue).

Also kind of like the look of the boostrap navmenu.

Can't argue about taste 😉

[markoweb2]

I sadly have to inform you that FluentTreeView is still broken. Slightly expanding the code based on your workaround:

<FluentTreeView Items="@list" @bind-SelectedItem="@this.selectedItem" />

<FluentButton Appearance="Appearance.Accent" OnClick="this.buttonClick">Add</FluentButton>

@code
{
    private ITreeViewItem? selectedItem;
    private List<TreeViewItem> list = new List<TreeViewItem>() { new TreeViewItem() { Text = "test 1" }, new TreeViewItem() { Text = "test 2" } };

    private void buttonClick(MouseEventArgs e)
    {
        var newitem = new TreeViewItem() { Text = "broken" };
        this.list.Add(newitem);
        this.selectedItem = newitem;
    }
}

Yields this behavior - selection disappears after every second add:

Then another bug appears when you want to react to selection changed events.
There are 3 different selection changed events on FluentTreeView - CurrentSelectedChanged, OnSelectedChange and SelectedItemChanged.
Only the latter two apply, but both have bugs of their own.

OnSelectedChanged:
Event fired after the selection already on next target.

<FluentTreeView Items="@list" @bind-SelectedItem="@this.selectedItem" OnSelectedChange="this.selectedChanged" />
<label>@this.testtext</label>

@code
{
    private string testtext = String.Empty;
    private ITreeViewItem? selectedItem;
    private List<TreeViewItem> list = new List<TreeViewItem>() { new TreeViewItem() { Text = "test 1" }, new TreeViewItem() { Text = "test 2" }, new TreeViewItem() { Text = "test 3" } };

    private void selectedChanged(FluentTreeItem? args)
    {
        if (args != null && args.Selected) this.testtext = args.Text!;
    }
}

Yields:

SelectedItemChanged:
This forces us to set up SelectedItem as a one-way bind only - could be managed if not for the following bug:
Doesn't clear the previous selection and doesn't fire the SelectedItemChanged event when adding items (nothing shown in Visual Studio debugger log. Does get triggered when you manually click on items.)

<FluentTreeView Items="@list" SelectedItem="@this.selectedItem" SelectedItemChanged="@this.SelectedItemChanged" />

<FluentButton Appearance="Appearance.Accent" OnClick="this.buttonClick">Add</FluentButton>

@code
{
    private int counter = 0;
    private ITreeViewItem? selectedItem;
    private List<TreeViewItem> list = new List<TreeViewItem>() { new TreeViewItem() { Text = "test 1" }, new TreeViewItem() { Text = "test 2" } };

    private void buttonClick(MouseEventArgs e)
    {
        // this.selectedItem = null; // does not help
        var newitem = new TreeViewItem() { Text = "broken " + (counter++).ToString() };
        this.list.Add(newitem);
        this.selectedItem = newitem;
    }

    private void SelectedItemChanged(ITreeViewItem? args)
    {
        if (args != null) System.Diagnostics.Trace.WriteLine(args!.Text); // not fired during add new item
    }
}

Yields:

[vnbaaij]

selection disappears after every second add

I think this is coming from the underlying web component. Will investigate.

[vnbaaij]

I sadly have to inform you that FluentTreeView is still broken. Slightly expanding the code based on your workaround:

<FluentTreeView Items="@list" @bind-SelectedItem="@this.selectedItem" />

<FluentButton Appearance="Appearance.Accent" OnClick="this.buttonClick">Add</FluentButton>

@code
{
    private ITreeViewItem? selectedItem;
    private List<TreeViewItem> list = new List<TreeViewItem>() { new TreeViewItem() { Text = "test 1" }, new TreeViewItem() { Text = "test 2" } };

    private void buttonClick(MouseEventArgs e)
    {
        var newitem = new TreeViewItem() { Text = "broken" };
        this.list.Add(newitem);
        this.selectedItem = newitem;
    }
}

Ok, I have confirmed this is a bug in the underlying Web Component we use. As these are not actively being maintained anymore, we are not going to get a fix for that anytime soon.

Then another bug appears when you want to react to selection changed events. There are 3 different selection changed events on FluentTreeView - CurrentSelectedChanged, OnSelectedChange and SelectedItemChanged. Only the latter two apply, but both have bugs of their own.

Please, I would like to not have issues stacked upon each other.

So, I'm going to close this one as the original issue is solved by adding the @bind-SelectedItem="@SelectedItem and the second issue (the add and every other being selected is ) is not being fixed in the underlying web components we use. I'll copy the issue that you then called out to a new issue.