Global Header / Global Navigation: Menu Behavior

[mbeard]

Recently, I believe there were changes to Global Navigation to ensure that multiple dropdown menus were not open at the same time. That appears to be resolved now, but I did encounter a similar issue, where a dropdown menu remains displayed when clicking from a nav dropdown to a nav link

1. Click on a nav item dropdown to display the menu
2. Click on a nav item link
3. Notice the nav item dropdown menu is not hidden

Also, please verify the issue with multiple menus being displayed is resolved for Global Header menus too. I was able to display the help, settings, and profile menus all at the same time.

[mbeard]

@tweettypography

[tweettypography]

Should be fixed in v0.2.0

[tweettypography]

Looks like there are still some issues when combining keyboard nav and mouse nav, as well as when clicking onto links rather than onto the background or other menus

[swilliamset]

@tweettypography where do you want to capture clicking away from the dropdown menu to close it? or is that working as expected?

i'd expect at a minimum that a dropdown on profile and nav should not be open at the same time.

for external clicks you may consider this solution
https://github.exacttarget.com/stephenwilliams/marketing-cloud-app/blob/MCGLOBALNV-373_integrate_ported_account_switcher/Package/Dynamic/lightning-experience/public/src/utilities/external-click-mixin.js

[interactivellama]

We use react-onclickoutside package in other components. If we go this route, we may use it.

Although TetherJS/Drop should be dealing with this, I know there's an outside click trigger within its API. I'll also check to see if this is a regression and worked in earlier versions of dropdown, too.

[interactivellama]

Seems to be an issue with just the global nav. I just tried a link next to the dropdown and and another dropdown and they all seemed to worked as expected with mouse clicks.

[interactivellama]

Use of href="#" means that the event needs to be prevented. I'm thinking about not preventing the click event to allow dropdown menus to close (which seem to be listening on a ancestor DOM node).

Just leave out the href if you are going to use onClick. Although this would break URLs for bookmarking (Don't break the internet even if it's an SPA!). Hmm... will think about it some more.

Related to #484