[UI shell] [react] Last header menu item dropdown is not expanded on click

[pujita9610]

While using Header menu and header menu items the last menu item is not expanded.

Packages and components used:

HeaderNavigation,
HeaderMenu,
HeaderMenuItem

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

Please navigate to this codesandbox url and click the Link 5 menu item then Link 4.

When I click Link4 the sub menu items open and close properly whereas when I click Link 5 the sub menu items open and close immediately. Also just clicking the Link 5 when the Link 4 is clicked the Link 5 sub menu items open.

Is this issue related to a specific component?

Yes. React UI Shell with Header actions and Nav

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

On clicking the menu item it should be active(expanded).

What browser are you working in?

Google

What version of the Carbon Design System are you using?

• carbon-components -10.4.1
• carbon-components-react -7.4.1

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/header-with-actions-and-nav-2pf3p

[Garfield550]

Same issue.

[tw15egan]

Interesting, running it locally I'm not running into any issues when I add in another MenuItem... But I see the issue when I checkout the CodeSandbox. Seems like this may be fixed in the newest release when it's released. I'm seeing a bunch of fixes for UI-Shell that are not out yet: v10.9.2...master

[ndtx]

Hit this issue as well. If I empty/remove or put them after HeaderGlobalBar it works, but I need them both as described above.

[tw15egan]

@ndite like I said, I'm not seeing this locally so I'm hoping this issue will be resolved when we publish our next release

[ndtx]

Still happens with the module published 4 days ago (10.9.3, 7.9.3)

https://codesandbox.io/s/header-with-actions-and-nav-qre4k

At this time the issue can be seen here too: https://www.carbondesignsystem.com/components/UI-shell-header/code#header-with-actions-and-nav

[tw15egan]

Still happens with the module published 4 days ago (10.9.3, 7.9.3)

https://codesandbox.io/s/header-with-actions-and-nav-qre4k

Hmm, getting an error when trying to view the latest CodeSandbox..

[xxxle0]

i think the will-change: transform of icon svg effect this behavior.

[tw15egan]

@xxxle0 would simply removing this fix the issue?

[xxxle0]

yep you can test it in codeSandbox by remove will-transfer in 3 svg icon