Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

UI Shell header menu onBlur not working

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having. Using the UI Shell header with multiple sub menus, the onblur doesn’t close some intended dropdowns, and sometimes they will be stuck opened until I manually click on the menu button to close it.

Is this issue related to a specific component? Yes, UI Shell

What did you expect to happen? What happened instead? What would you like to see changed? When focus drops from a submenu, it should close.

What browser are you working in? Firefox

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, looking to release Mid April

Steps to reproduce the issue

Click on one menu to show the dropdown
Click on a second menu to show the dropdown
Both menus are opened (is this expected? or should the first menu close?)
Click anywhere else on the page, the first menu stays open.

Please create a reduced test case in CodeSandbox

Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox

React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Sandbox links are broken, can be reproduced using code from storybook and adding an additional submenu so there are 2.

Additional information

Screenshots or code
Notes

Issue Analytics

State:
Created 4 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

gptt916commented, Mar 10, 2020

I just updated both, looks like the issue is solved with the latest releases, thank you!

0reactions

tw15egancommented, Mar 10, 2020

Woo! Glad to hear. Going to close this out but feel free to reopen if you run into any other issues 👍

Top Results From Across the Web

onBlur() not working properly - Stack Overflow

shell -pop to be closed if they click out of the element area. It appears not to fire though, and none of the...

Why onfocus and onblur infinitely calls itself?

It's happening because you're using an alert. When you use an alert, this causes the focus to change from the input element to...

HTML onblur Event Attribute - W3Schools

The onblur attribute fires the moment that the element loses focus. Onblur is most often used with form validation code (e.g. when the...

Dropdown - Carbon Design System

Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus....

UI shell header – Carbon Design System

All three can be used independently, but the components were designed to work together. Shell UI component. Header, The highest level of navigation....