fix: [TreeView] @bind-SelectedItem does not work when clicking on an icon.

[k111s222]

🐛 Bug Report

💻 Repro or Code Sample

https://www.fluentui-blazor.net/TreeView 'With Items'

As can be seen in the "With Items" example on the fluentui-blazor.net page, when clicking on an icon or a number enclosed in square brackets, the selected item (@bind-SelectedItem="@SelectedItem") is not work.

🤔 Expected Behavior

I expected the bind-SelectedItem to change when clicking the icon or text (generated from the ItemTemplate) of a list item.

😯 Current Behavior

💁 Possible Solution

The solution I implemented to resolve this issue was to create an empty div that overlays the list item and apply the onclick event to that div. <div @onclick="async(e) => await HandleSelect(myTreeViewItem)" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(256,0,0,0.1); z-index: 10;"></div>

🔦 Context

🌍 Your Environment

• OS & Device: Windows
• Browser: Mozilla FireFox, webview2 (rust tauri)
• .NET and Fluent UI Blazor library Version: example in https://www.fluentui-blazor.net/TreeView and Microsoft.FluentUI.AspNetCore.Components-4.10.0

[dvoituron]

The problem seems linked to the WebComponents: when an element contains HTML tags (and not just text), the content seems unselectable. I don't think I'll be able to find a solution/hack immediately via our Blazor library, without having the web components corrected. We'll try to find a way.

In this example, the second item contains a "formatted" element using <div> and this item is no longer selectable.

<fluent-tree-view>
  <fluent-tree-item>One</fluent-tree-item>
  <fluent-tree-item><div>Two</div></fluent-tree-item>
  <fluent-tree-item>Three</fluent-tree-item>
</fluent-tree-view>

[vnbaaij]

Closing this as it is not actionable from our side. The v2 web components will not see updates anymore...