Improper Rendering of State on InteriorLeftNav: Only previously selected item appears as selected

@lummish commented on Fri Mar 16 2018

Improper Rendering of State: Only previously selected item appears as selected

Detailed description

Describe in detail the issue you're having.

The left interior nav is only rendering the previously selected item as selected.

Gif Example

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

InteriorLeftNav

What did you expect to happen? What happened instead? What would you like to see changed?

Expected: The most recently clicked list item to appear as selected. The state of the top level component (InteriorLeftNav) changes, but the clicked list item does not attain the classname active until the another list item is selected.

What Happened Instead: The component renders the second most recently clicked item as selected

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

carbon-components: 8.16.8 carbon-components-react: 5.31.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Nothing particularly pressing

Steps to reproduce the issue

Step 1: Define a component file like so:

// src/components/SideNav.tsx 
import { InteriorLeftNav, InteriorLeftNavItem, InteriorLeftNavList } from 'carbon-components-react';
import 'carbon-components/scss/components/interior-left-nav/interior-left-nav.scss';
import * as React from 'react';

class SideNav extends React.Component<{}, {}> {
  constructor(props: {}) {
    super(props);
  }
  render() {
    return (
      <div>
        <InteriorLeftNav>
          <InteriorLeftNavItem>
            <a href="#dashboard"> Item 1 </a>
          </InteriorLeftNavItem>
          <InteriorLeftNavItem>
            <a href="#tables"> Item 2 </a>
          </InteriorLeftNavItem>
          <InteriorLeftNavItem>
            <a href="#graphs"> Item 3 </a>
          </InteriorLeftNavItem>
          <InteriorLeftNavList title="Item 4">
            <InteriorLeftNavItem>
              <a href="#"> Sub Item 1 </a>
            </InteriorLeftNavItem>
          </InteriorLeftNavList>
        </InteriorLeftNav>
      </div>
    );
  }
}

export default SideNav;

Step 2: include the component in the root div

Step 3: Click items and notice that they are broken

Additional information

Screenshots or code
Notes

@joshblack commented on Mon Mar 19 2018

cc @asudoh since I think you were tackling some ILN items?

@asudoh commented on Tue Mar 27 2018

Seems that this is caused by a race condition of location.hash being set vs. React rendering. @marijohannessen Do you have a test case for https://github.com/carbon-design-system/carbon-components-react/pull/447 concerning https://github.com/carbon-design-system/carbon-components-react/issues/279? I have a fix in hand, but it's a minor breaking change and wanted to make sure our major use cases are not broken at least. Thanks!

@asudoh commented on Tue Mar 27 2018

Refs: https://github.com/carbon-design-system/carbon-components-react/issues/698

@joshblack commented on Fri May 04 2018

Hey @asudoh! Wanted to follow up on this and see if we could proceed with the fix you mentioned?

@asudoh commented on Fri May 04 2018

Hi @joshblack we can proceed with the change as long as @marijohannessen is comfortable with it - Just wanted to make sure her earlier code concerning location.hash won’t be broken. Thanks!

carbon-design-system / carbon-addons-cloud-react