diff --git a/packages/components/src/tree-view/index.ts b/packages/components/src/tree-view/index.ts
index 6f06d50..3ece559 100644
--- a/packages/components/src/tree-view/index.ts
+++ b/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.
diff --git a/packages/components/src/tree-view/tree-view.stories.ts b/packages/components/src/tree-view/tree-view.stories.ts
index 3374189..7abe0a9 100644
--- a/packages/components/src/tree-view/tree-view.stories.ts
+++ b/packages/components/src/tree-view/tree-view.stories.ts
@@ -36,7 +36,7 @@ const Template: StoryFn = (args): HTMLElement => {
Nested item 3
- Root item 2
+ Root item 2
Flowers
Daisy
diff --git a/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-chromium-linux.png b/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-chromium-linux.png
index 0b1add5..f3ac3a9 100644
Binary files a/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-chromium-linux.png and b/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-chromium-linux.png differ
diff --git a/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-firefox-linux.png b/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-firefox-linux.png
index e405ebf..007c320 100644
Binary files a/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-firefox-linux.png and b/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-firefox-linux.png differ
diff --git a/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-webkit-linux.png b/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-webkit-linux.png
index 06f74ce..8d0cc7a 100644
Binary files a/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-webkit-linux.png and b/packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-webkit-linux.png differ