From 72c2a0588569ab7c25c93d72ef1862fd60e1d107 Mon Sep 17 00:00:00 2001 From: Mike Cordes Date: Thu, 2 Nov 2023 10:36:07 -0400 Subject: [PATCH] fix(react): uishell sidenavmenu active descendants (#15027) --- packages/react/src/components/UIShell/SideNavMenu.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/UIShell/SideNavMenu.tsx b/packages/react/src/components/UIShell/SideNavMenu.tsx index bcdb6869fe1f..e513f6d65d65 100644 --- a/packages/react/src/components/UIShell/SideNavMenu.tsx +++ b/packages/react/src/components/UIShell/SideNavMenu.tsx @@ -89,7 +89,7 @@ const SideNavMenu = React.forwardRef( const className = cx({ [`${prefix}--side-nav__item`]: true, [`${prefix}--side-nav__item--active`]: - isActive || (hasActiveChild(children) && !isExpanded), + isActive || (hasActiveDescendant(children) && !isExpanded), [`${prefix}--side-nav__item--icon`]: IconElement, [`${prefix}--side-nav__item--large`]: large, [customClassName as string]: !!customClassName, @@ -200,7 +200,7 @@ SideNavMenu.propTypes = { Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities: a single element, an array of elements, or null or undefined. **/ -function hasActiveChild(children: ReactNode | ReactNode[]): boolean { +function hasActiveDescendant(children: ReactNode | ReactNode[]): boolean { if (Array.isArray(children)) { return children.some((child) => { if (!React.isValidElement(child)) { @@ -213,9 +213,14 @@ function hasActiveChild(children: ReactNode | ReactNode[]): boolean { const props = child.props as { isActive?: boolean; 'aria-current'?: string; + children: ReactNode | ReactNode[]; }; - if (props.isActive === true || props['aria-current']) { + if ( + props.isActive === true || + props['aria-current'] || + (props.children instanceof Array && hasActiveDescendant(props.children)) + ) { return true; }