Don't unselect on click and Enter

Select if click occurs in tree item sub element

Author: fcollonval

packages/components/src/tree-view/index.ts

@@ -3,8 +3,10 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
+  isTreeItemElement,
   treeViewTemplate as template,
-  TreeView
+  TreeView,
+  type TreeItem
 } from '@microsoft/fast-foundation';
 import { treeViewStyles as styles } from './tree-view.styles.js';
 
@@ -14,7 +16,41 @@ import { treeViewStyles as styles } from './tree-view.styles.js';
  * @public
  * @tagname jp-tree-view
  */
-class JupyterTreeView extends TreeView {}
+class JupyterTreeView extends TreeView {
+  /**
+   * Handles click events bubbling up
+   *
+   *  @internal
+   */
+  public handleClick(e: Event): boolean | void {
+    if (e.defaultPrevented) {
+      // handled, do nothing
+      return;
+    }
+
+    if (!(e.target instanceof Element)) {
+      // not a tree item, ignore
+      return true;
+    }
+
+    let item = e.target as Element | null;
+    while (item && !isTreeItemElement(item)) {
+      item = item.parentElement;
+
+      // Escape if we get out of the tree view component
+      if (item === this) {
+        item = null;
+      }
+    }
+
+    if (item && !(item as TreeItem).disabled) {
+      // Force selection - it is not possible to unselect
+      (item as TreeItem).selected = true;
+    }
+
+    return;
+  }
+}
 
 /**
  * A function that returns a {@link @microsoft/fast-foundation#TreeView} registration for configuring the component with a DesignSystem.

packages/components/src/tree-view/tree-view.stories.ts

@@ -36,7 +36,7 @@ const Template: StoryFn = (args): HTMLElement => {
         <jp-tree-item>Nested item 3</jp-tree-item>
       </jp-tree-item>
       <jp-tree-item expanded>
-        Root item 2
+        Root <em style="padding: 0 0.2rem;">item</em> 2
         <jp-tree-item>
           Flowers
           <jp-tree-item disabled>Daisy</jp-tree-item>