Added inert attr to tree children

Author: Eric Olkowski

packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -1,4 +1,4 @@
-import { memo, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useContext, useEffect, useRef, useState, cloneElement, Children, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
@@ -71,6 +71,15 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
 
+  const clonedChildren = Children.map(
+    children,
+    (child) =>
+      isValidElement(child) &&
+      cloneElement(child as React.ReactElement<any>, {
+        inert: isExpanded ? undefined : ''
+      })
+  );
+
   return (
     <li
       className={css(
@@ -162,7 +171,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
           </span>
         </div>
       </div>
-      {(isExpanded || hasAnimations) && children}
+      {(isExpanded || hasAnimations) && clonedChildren}
     </li>
   );
 };

packages/react-core/src/components/DualListSelector/__tests__/DualListSelectorTreeItem.test.tsx

@@ -7,7 +7,7 @@ import { DualListSelectorTreeItem } from '../DualListSelectorTreeItem';
 test('Does not render children by default', () => {
   render(
     <DualListSelectorTreeItem id="item-id" text="Test text">
-      Children content
+      <div>Children content</div>
     </DualListSelectorTreeItem>
   );
 
@@ -17,7 +17,7 @@ test('Does not render children by default', () => {
 test('Renders children when defaultExpanded is true', () => {
   render(
     <DualListSelectorTreeItem defaultExpanded id="item-id" text="Test text">
-      Children content
+      <div>Children content</div>
     </DualListSelectorTreeItem>
   );
 
@@ -27,9 +27,29 @@ test('Renders children when defaultExpanded is true', () => {
 test('Renders children when hasAnimations is true', () => {
   render(
     <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
-      Children content
+      <div>Children content</div>
     </DualListSelectorTreeItem>
   );
 
   expect(screen.getByText('Children content')).toBeVisible();
 });
+
+test('Renders children with inert attribute by default when hasAnimations is true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toHaveAttribute('inert', '');
+});
+
+test('Does not render children with inert attribute when hasAnimations and defaultExpanded are true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations defaultExpanded id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).not.toHaveAttribute('inert');
+});