fix(TreeNode): preserve nested node expand state (#17630)

* fix(TreeNode): preserve nested node expand state * fix(TreeView): prevent focus on hidden child nodes
carbon-design-system · Oct 10, 2024 · af1cd1b · af1cd1b
1 parent 8abaf92
commit af1cd1b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/packages/react/src/components/TreeView/TreeNode.tsx b/packages/react/src/components/TreeView/TreeNode.tsx
@@ -356,11 +356,13 @@ const TreeNode = React.forwardRef<HTMLLIElement, TreeNodeProps>(
             {label}
           </span>
         </div>
-        {expanded && (
-          <ul role="group" className={`${prefix}--tree-node__children`}>
-            {nodesWithProps}
-          </ul>
-        )}
+        <ul
+          role="group"
+          className={classNames(`${prefix}--tree-node__children`, {
+            [`${prefix}--tree-node--hidden`]: !expanded,
+          })}>
+          {nodesWithProps}
+        </ul>
       </li>
     );
   }

diff --git 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
@@ -40,6 +40,10 @@
     }
   }
 
+  .#{$prefix}--tree-node--hidden {
+    display: none;
+  }
+
   .#{$prefix}--tree-node__children {
     @include component-reset.reset;