diff --git a/packages/react/src/components/TreeView/TreeNode.tsx b/packages/react/src/components/TreeView/TreeNode.tsx index a2ba25a8d627..62a1326b187e 100644 --- a/packages/react/src/components/TreeView/TreeNode.tsx +++ b/packages/react/src/components/TreeView/TreeNode.tsx @@ -356,11 +356,13 @@ const TreeNode = React.forwardRef( {label} - {expanded && ( - - )} + ); } diff --git a/packages/react/src/components/TreeView/TreeView.tsx b/packages/react/src/components/TreeView/TreeView.tsx index 0c55ebf74781..4f20a115d0e6 100644 --- a/packages/react/src/components/TreeView/TreeView.tsx +++ b/packages/react/src/components/TreeView/TreeView.tsx @@ -229,7 +229,10 @@ const TreeView: TreeViewComponent = ({ event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && - !treeWalker.current.currentNode.getAttribute('aria-disabled') + !treeWalker.current.currentNode.getAttribute('aria-disabled') && + !treeWalker.current.currentNode.classList.contains( + `${prefix}--tree-node--hidden` + ) ) { nodeIds.push(treeWalker.current.currentNode?.id); } @@ -244,7 +247,8 @@ const TreeView: TreeViewComponent = ({ event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && - !nextFocusNode.getAttribute('aria-disabled') + !nextFocusNode.getAttribute('aria-disabled') && + !nextFocusNode.classList.contains(`${prefix}--tree-node--hidden`) ) { nodeIds.push(nextFocusNode?.id); } @@ -257,7 +261,10 @@ const TreeView: TreeViewComponent = ({ while (treeWalker.current.nextNode()) { if ( treeWalker.current.currentNode instanceof Element && - !treeWalker.current.currentNode.getAttribute('aria-disabled') + !treeWalker.current.currentNode.getAttribute('aria-disabled') && + !treeWalker.current.currentNode.classList.contains( + `${prefix}--tree-node--hidden` + ) ) { nodeIds.push(treeWalker.current.currentNode?.id); } @@ -286,7 +293,10 @@ const TreeView: TreeViewComponent = ({ if (!(node instanceof Element)) { return NodeFilter.FILTER_SKIP; } - if (node.classList.contains(`${prefix}--tree-node--disabled`)) { + if ( + node.classList.contains(`${prefix}--tree-node--disabled`) || + node.classList.contains(`${prefix}--tree-node--hidden`) + ) { return NodeFilter.FILTER_REJECT; } if (node.matches(`li.${prefix}--tree-node`)) { diff --git a/packages/styles/scss/components/treeview/_treeview.scss b/packages/styles/scss/components/treeview/_treeview.scss index a3156534e9d4..b5bc306319d1 100644 --- a/packages/styles/scss/components/treeview/_treeview.scss +++ b/packages/styles/scss/components/treeview/_treeview.scss @@ -40,6 +40,10 @@ } } + .#{$prefix}--tree-node--hidden { + display: none; + } + .#{$prefix}--tree-node__children { @include component-reset.reset;