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