[Bug]: Cannot toggle a SideNavMenu inside a SideNavMenu

[atar9500]

Package

@carbon/react

Browser

Chrome

Package version

v1.71.0

React version

v18.3.1

Description

When rendering a nested menu (a SideNavMenu inside a SideNavMenu) inside the SideNav component, a menu of a menu does not open up on click.

A current workaround that work is:

import React from 'react';
import { SideNavMenu } from '@carbon/react';

const WorkaroundNavMenu = ({ ...rest }) => {
  const ref = React.useRef();

  React.useEffect(() => {
    const callback = () => {
      const expanded = ref.current.getAttribute('aria-expanded');
      ref.current.setAttribute(
        'aria-expanded',
        expanded === 'true' ? 'false' : 'true'
      );
    };
    ref.current.addEventListener('click', callback);
    return () => {
      ref.current?.removeEventListener('click', callback);
    };
  }, []);

  return <SideNavMenu ref={ref} {...rest} />;
};

export default WorkaroundNavMenu;

Reproduction/example

https://stackblitz.com/edit/github-1p4yd4

Steps to reproduce

1. Render a side nav as follows:

export default function App() {
  const [isSideNavExpanded, setSideNavExpanded] = React.useState(false);
  return (
    <div>
      <Header>
        // ...Some Header components
        <SideNav
          expanded={isSideNavExpanded}
          aria-label="Side navigation"
          href="#main-content"
          isRail
        >
          <SideNavItems>
            <SideNavMenu title="L0 menu">
              <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                Link
              </SideNavMenuItem>
              <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                Link
              </SideNavMenuItem>
              <SideNavMenu title="This submenu doesn't work">
                <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                  Link
                </SideNavMenuItem>
                <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                  Link
                </SideNavMenuItem>
                <SideNavMenuItem href="https://www.carbondesignsystem.com/">
                  Link
                </SideNavMenuItem>
              </SideNavMenu>
            </SideNavMenu>
          </SideNavItems>
        </SideNav>
      </Header>
    </div>
  );
}

2. Open SideNav.
3. Open a SideNavMenu inside of SideNavMenu.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems