SideNavMenu isSideNavExpanded prop not working

[gptt916]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When using SideNavMenu component, passing a boolean value as isSideNavExpanded has no effect on the rendered result

Is this issue related to a specific component?

Yes

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

I would like to see the component respond to the prop as described in the documentation.

What browser are you working in?

Firefox, Chrome

What version of the Carbon Design System are you using?

Latest

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

IBM Cloud Docs

Steps to reproduce the issue

1. Use the component passing in true to isSideNavExpanded

Additional information

https://codesandbox.io/s/codesandbox-wc712?fontsize=14

[jendowns]

Yeah just wanted to confirm that we are seeing this as well in IBM Security -- SideNavMenu doesn't appear to maintain/update state correctly? 🤔 I don't see the isExpanded state being updated as I manually open/close the menu -- it's always false.

Moreover, what is the difference between defaultExpanded and isSideNavExpanded? Neither of them appear to work for us, either.

cc @joshblack @asudoh have either of you seen this as well?

[asudoh]

Seems that isSideNavExpanded represents the expanded state of side nav, instead of "category" type of side nav item - But the former seems to control the latter somehow. Not sure if the original author intended that or not.

@aagonzales Should the left drawer being shown/hidden (expanded/collapsed) affect the side nav item (category) being expanded/collapsed?

[aagonzales]

Sorry, I'm not sure I'm following. I'm only seeing a dropdown in the codepen demo and nothing concerning the sideNav. Could some do a screen recording of what's happening maybe?

[gptt916]

The dropdown is the sidenav, I have passed a boolean true to the prop isSideNavExpanded but the rendered nav is not expanded. Clicking on it ('This should be expanded') will expand it.

Essentially there is no way to control whether the dropdown (sidenav) is expanded, except through actual clicks. Cannot link the expanding/collapsing with other functionalities.

[asudoh]

@aagonzales Sorry for the hard-to-understand question. I figured it out - The logic around isSideNavExpanded seems to have been for #3527, which requests side nav menu closed when it gets in "rails" mode (collapsed side nav).

Note to devs: It means that isSideNavExpanded is not for application-level control of side nav menu's expanded state.

@jendowns Unless we don't want to have side nav menu open again when side nav is back expanded, change in isSideNavExpanded shouldn't update state.isExpanded and we can make isSideNavExpanded simply affect the className logic (to force the side nav menu collapsed in "rails" mode) (Edit: I'm guessing this can be achieved simply by CSS even, without using isSideNavExpanded prop). In case otherwise, we can fix the state update logic to correctly represent what we want with the "rails" mode.

[tw15egan]

After updating to the latest version of v10, this can be controlled with the defaultExpanded prop on SideNavMenu. Here is an example: https://codesandbox.io/s/codesandbox-forked-xtdegu?file=/src/index.js