SideNav and overlay behaviour on click #3666

nxn-4-wdf · 2019-08-07T13:29:55Z

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:

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.
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 and 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.

The text was updated successfully, but these errors were encountered:

nxn-4-wdf · 2019-08-08T08:48:34Z

React code example reproducing the issue: https://codesandbox.io/s/sidenavissues-jtrzb

Result here: https://jtrzb.csb.app/#/
To reproduce:

Reduce viewport width to less than 40rem, so that the HeaderMenuButton is displayed on the top-left corner.
Click on the menu button to display the SideNav.
Click on the different zones (see picture above in section "Additional information") does not close the SideNav, as expected.

Related issues with keyboard navigation:

pressing the Enter-key when a SideNavLink is selected does not close the side navigation
pressing the ESC-key does not close the side navigation

dryhurst · 2019-12-27T01:31:27Z

@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

dryhurst · 2019-12-27T02:17:03Z

@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
                }>

jalbertogg · 2020-05-07T11:13:31Z

@dryhurst Thanks for your code!
I have used it in my code and solves all the use cases except one:

It calls onClickSideNavExpand on clicking on the sidebar link items, but does not hide the sidenav panel. It is weird because I can see how it removes the overlay background and change the header menu button... I think maybe the nav items is preventing it to be closed when they get the focus.

<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="my app"
                  onClick={ isSideNavExpanded === true ? onClickSideNavExpand : null}
                  >
                  <SkipToContent />
                  <HeaderMenuButton
                    aria-label="Open menu"
                    onClick={onClickSideNavExpand}
                    isActive={isSideNavExpanded}
                  />
                  <HeaderName element={NavLink} to="/" prefix="">
                    MyApp
                  </HeaderName>
                  <HeaderNavigation aria-label="Carbon Tutorial">
                    <HeaderMenuItem element={NavLink} to="/about">About</HeaderMenuItem>
                    <HeaderMenuItem element={NavLink} to="/help">Help</HeaderMenuItem>
                    <HeaderMenuItem element={NavLink} to="/contact">Contact</HeaderMenuItem>
                    <HeaderMenuItem element={NavLink} to="/theme">Theme</HeaderMenuItem>
                  </HeaderNavigation>
                  <SideNav
                    aria-label="Side navigation"
                    expanded={isSideNavExpanded}
                    isPersistent={false}>
                    <SideNavItems>
                      <HeaderSideNavItems>
                        <HeaderMenuItem element={NavLink} to="/about">About</HeaderMenuItem>
                        <HeaderMenuItem element={NavLink} to="/help">Help</HeaderMenuItem>
                        <HeaderMenuItem element={NavLink} to="/contact">Contact</HeaderMenuItem>
                        <HeaderMenuItem element={NavLink} to="/theme">Theme</HeaderMenuItem>
                      </HeaderSideNavItems>
                    </SideNavItems>
                  </SideNav>
                </Header>
              </Fragment>
          )}}
        />

Thanks!

jalbertogg · 2020-05-07T12:03:17Z

Hey, I have solved it with a workaround, I have identified that by clicking on the nav items it didn't remove the bx--side-nav--expanded class of the side nav panel.

<SideNav
   aria-label="Side navigation"
   expanded={isSideNavExpanded}
   isPersistent={false}
   className="global_sidenav">
      <SideNavItems>
         <HeaderSideNavItems>
            <HeaderMenuItem element={NavLink} to="/about" onClick={hideSideNav}>About</HeaderMenuItem>
            <HeaderMenuItem element={NavLink} to="/help" onClick={hideSideNav}>Help</HeaderMenuItem>
            <HeaderMenuItem element={NavLink} to="/contact" onClick={hideSideNav}>Contact</HeaderMenuItem>
            <HeaderMenuItem element={NavLink} to="/theme" onClick={hideSideNav}>Theme</HeaderMenuItem>
         </HeaderSideNavItems>
      </SideNavItems>
</SideNav>

const hideSideNav = () => {
    var sidenav = document.getElementsByClassName('global_sidenav');
    sidenav[0].classList.remove('bx--side-nav--expanded');
  };`

ndtx · 2020-05-12T13:42:45Z

@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

this will trigger when you try to expand a sidenav menu as well.

let onHeaderClick = (evt, hprops) => {
  if(evt.target.className.includes && evt.target.className.includes('nav__overlay')) {
    hprops.onClickSideNavExpand(evt)
  }
}

<HeaderContainer render={hprops => (
  <Header aria-label="example" onClick={(evt) => {onHeaderClick(evt, hprops)}}>
)} />

JQC5610 · 2020-05-16T18:33:35Z

HeaderMenuButton not rendering on Chrome but I can see it when I open the CodeSandBox, any reason for this?

ndtx · 2020-05-16T21:44:43Z

HeaderMenuButton not rendering on Chrome but I can see it when I open the CodeSandBox, any reason for this?

<HeaderMenuButton
    aria-label="Open menu"
    onClick={onClickSideNavExpand}
    isActive={isSideNavExpanded}
/>

make sure you have this added. also.. this appears only on low width pages. (max ~1050px)

propovip · 2020-06-25T01:45:30Z

Is there a way to display the HeaderMenuButton even if the page width is more than 1050px? And when the HeaderMenuButton is expanded the background is not greyed out.

jmmadsen · 2020-06-26T14:41:53Z

^would like to second this question. Basically, is there a way to turn responsiveness off through props or something? It seems odd it forces you to use responsiveness.

emyarod · 2021-03-23T18:08:06Z

cc @carbon-design-system/design do we have a spec that covers the expand/collapse behavior for the sidenav? also is the expand/collapse behavior only available at smaller screen sizes?

thyhmdo · 2021-03-30T19:32:04Z

@here So the current Storybook may have a bug issue with it. But this old issue has the correct specified interaction spec in its and should resolve the current issues with the SideNav in Storybook.

#2335 (comment)

thyhmdo · 2021-03-30T19:32:37Z

nxn-4-wdf added the type: bug 🐛 label Aug 7, 2019

aledavila added component: ui-shell package: react carbon-components-react priority: high severity: 3 https://ibm.biz/carbon-severity labels Dec 6, 2019

mattrosno added the squad: system label Dec 17, 2019

mattrosno removed the squad: system label Jan 9, 2020

joshblack mentioned this issue Mar 22, 2021

Sprint 6: O' Ostrich Where Art Thou? 🐦 #8118

Closed

86 tasks

thyhmdo self-assigned this Mar 30, 2021

joshblack mentioned this issue Apr 5, 2021

Sprint 7: Platypus of the Apes 🦍 #8267

Closed

emyarod mentioned this issue Apr 5, 2021

feat(SideNav): add onOverlayClick handler #8296

Merged

kodiakhq bot closed this as completed in #8296 Apr 28, 2021

emyarod mentioned this issue Apr 30, 2021

Sprint 8: Quarantine Quetzal 🦜 #8398

Closed

ghost mentioned this issue Nov 3, 2021

HeaderMenuButton not rendering when width is more than 1050px #10045

Closed

jeanbu mentioned this issue Jun 2, 2023

[Question]: SideNav not closing when clicking links #13911

Closed

1 task

lamualfa mentioned this issue Jul 31, 2023

fix(SideNav): don't change expanded state when it's controlled #14354

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SideNav and overlay behaviour on click #3666

SideNav and overlay behaviour on click #3666

nxn-4-wdf commented Aug 7, 2019

nxn-4-wdf commented Aug 8, 2019

dryhurst commented Dec 27, 2019 •

edited

Loading

dryhurst commented Dec 27, 2019 •

edited

Loading

jalbertogg commented May 7, 2020 •

edited

Loading

jalbertogg commented May 7, 2020 •

edited

Loading

ndtx commented May 12, 2020 •

edited

Loading

JQC5610 commented May 16, 2020 •

edited

Loading

ndtx commented May 16, 2020

propovip commented Jun 25, 2020 •

edited

Loading

jmmadsen commented Jun 26, 2020

emyarod commented Mar 23, 2021

thyhmdo commented Mar 30, 2021

thyhmdo commented Mar 30, 2021

SideNav and overlay behaviour on click #3666

SideNav and overlay behaviour on click #3666

Comments

nxn-4-wdf commented Aug 7, 2019

What package(s) are you using?

Detailed description

Steps to reproduce the issue

Additional information

nxn-4-wdf commented Aug 8, 2019

dryhurst commented Dec 27, 2019 • edited Loading

dryhurst commented Dec 27, 2019 • edited Loading

jalbertogg commented May 7, 2020 • edited Loading

jalbertogg commented May 7, 2020 • edited Loading

ndtx commented May 12, 2020 • edited Loading

JQC5610 commented May 16, 2020 • edited Loading

ndtx commented May 16, 2020

propovip commented Jun 25, 2020 • edited Loading

jmmadsen commented Jun 26, 2020

emyarod commented Mar 23, 2021

thyhmdo commented Mar 30, 2021

thyhmdo commented Mar 30, 2021

dryhurst commented Dec 27, 2019 •

edited

Loading

dryhurst commented Dec 27, 2019 •

edited

Loading

jalbertogg commented May 7, 2020 •

edited

Loading

jalbertogg commented May 7, 2020 •

edited

Loading

ndtx commented May 12, 2020 •

edited

Loading

JQC5610 commented May 16, 2020 •

edited

Loading

propovip commented Jun 25, 2020 •

edited

Loading