diff --git a/CHANGELOG.md b/CHANGELOG.md index fb9584d..81f52fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## [Unreleased] +### Patch Changes + +- Clicking between nodes no longer triggers phantom selection. + ## 0.17.1 ### Patch Changes diff --git a/src/components/tree-view/TreeView.tsx b/src/components/tree-view/TreeView.tsx index b55afeb..d2328b3 100644 --- a/src/components/tree-view/TreeView.tsx +++ b/src/components/tree-view/TreeView.tsx @@ -26,6 +26,7 @@ export type TreeViewProps = { dndRootElement?: HTMLElement | null; selectedNodeId?: string; rootNodeId: string; + rowHeight?: number; canDrop?: (args: { parentNode: NodeApi> | null; dragNodes: NodeApi>[]; @@ -43,6 +44,7 @@ export const TreeView = ({ selectedNodeId, rootNodeId, renderNode, + rowHeight = 35, canDrop, canDrag, afterMove, @@ -218,7 +220,7 @@ export const TreeView = ({ width={width} paddingTop={10} paddingBottom={10} - rowHeight={35} + rowHeight={rowHeight} disableDrag={disableDrag} disableDrop={({ parentNode, dragNodes, index }) => { if (canDrop) { @@ -327,7 +329,8 @@ const Row = ({ children, ...props }: RowProps) => { const target = e.target as HTMLElement | null; if (target) { const isInActionsToolbar = target.closest(".actions"); - const interactiveSelector = 'button, a[href], input, textarea, select, [role="menuitem"], [role="button"]'; + const interactiveSelector = + 'button, a[href], input, textarea, select, [role="menuitem"], [role="button"]'; const isInteractive = target.closest(interactiveSelector); if (isInActionsToolbar || isInteractive) { return; diff --git a/src/components/tree-view/index.scss b/src/components/tree-view/index.scss index 1cfd148..51039c4 100644 --- a/src/components/tree-view/index.scss +++ b/src/components/tree-view/index.scss @@ -29,6 +29,8 @@ .c__tree-view--row { outline: none; + margin: 2px 0; + pointer-events: none; &:focus-visible .c__tree-view--node { box-shadow: 0 0 0 2px @@ -63,6 +65,7 @@ border: 1.5px solid rgba(0, 0, 0, 0); cursor: pointer; padding: var(--c--globals--spacings--4xs) 0; + pointer-events: auto; gap: var(--c--globals--spacings--3xs); &:not(.willReceiveDrop, .isSelected):hover {