SideNav and overlay behaviour on click

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

I use the UI shell with a SideNav, and a HashRouter, similar to what’s described in the Carbon React tutorial.

On small or medium viewports, when you click on the HeaderMenuButton, the SideNav is expanded, and the rest of the page content is masked by a gray overlay.

Then there are 2 related issues:

1. If the user clicks on a SideNavLink, the content loads into the content area, but the SideNav remains expanded, and does not close, as is expected.
2. If the user wants to close the SideNav (as a result of 1, or simply because he wants to remain on the same page), he must click on the HeaderMenuButton (currently displaying as a cross). Clicking anywhere on the overlay or the menu bar does not close the SideNav as expected.

In both cases, user expects the SideNav to be closed after a click inside or outside of it, because that’s the way most apps behave.

Bug seems browser-independent. Using Node.js 10.16.2 (LTS). Dependencies and versions from package.json:

  "dependencies": {
    "@carbon/grid": "^10.4.0",
    "@carbon/icons-react": "^10.4.1",
    "carbon-components": "^10.4.1",
    "carbon-components-react": "^7.4.1",
    "carbon-icons": "^7.0.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },

Steps to reproduce the issue

Setup project with the UI Shell like in the Carbon React tutorial:

• use <HashRouter> and <Link> from react-router-dom
• App structure (stripped pseudo-code, does not contain the Router):

<HeaderContainer render={ ({ isSideNavExpanded, onClickSideNavExpand }) => (
  <>
    <Header>
      <SkipToContent />
      <HeaderMenuButton onClick={onClickSideNavExpand} isActive={isSideNavExpanded} />
      <HeaderName>Name</HeaderName>
      <SideNav expanded={isSideNavExpanded} isPersistent={false}>
        <SideNavItems>
          <SideNavLink element={Link} to="link1">Link 1</SideNavLink>
          <SideNavLink element={Link} to="link2">Link 2</SideNavLink>
        </SideNavItems>
      </SideNav>
    </Header>
    <p>Content area</p>
  </>
  )}
/>

Additional information

Picture below shows a prototype: clicking on any of the zones pointed to by an arrow should close the side navigation.

[dryhurst]

@nxn-4-wdf yo. i ran into another problem where the sidenav stays there if you resize the browser so i amended the code to look like this. this fixes both the click out issue you describes as well as a broken ghosted sidenav on resize

      <HeaderContainer
        render={({ isSideNavExpanded, onClickSideNavExpand }) => {
          window.addEventListener(
            'resize',
            () => {
              const viewportWidth =
                window.innerWidth || document.documentElement.clientWidth;
              if (viewportWidth > 1056) {
                if (isSideNavExpanded === true) onClickSideNavExpand();
              }
            },
            false
          );
          return (
            <Fragment>
              <Header
                aria-label="Carbon Tutorial"
                onClick={
                  isSideNavExpanded === true ? onClickSideNavExpand : null
                }>

[dryhurst]

@nxn-4-wdf hey man, i ran into this problem too. just change your <Header component to look like this:

<HeaderContainer
        render={({ isSideNavExpanded, onClickSideNavExpand }) => (
          <Fragment>
            <Header
              aria-label="nxn-4-wdf's Totally Tubular Application Worth Millions"
              onClick={
                isSideNavExpanded === true ? onClickSideNavExpand : null
              }>

tadaaaaa