Twenty Seventeen: Menu stays expanded after clicking on links

[nilamacharya]

Menu Items are sticky once user will click on it

Steps:

1. Installed WordPress 4.9.4
2. Imported file "themeunittestdata.wordpress.xml"
3. Activated Menu

Issue: Menu is shown sticky after clicking on it (where there is # link and third party links)

Expected Behaviour: It should be disappear once user will click on it

[chetan200891]

It looks like navigation.js adds .focus class for touch enabled devices for accessibility. And this affects on desktop as well. "li.focus" related CSS applies.

[afercia]

Yes, the focus CSS class is added also for keyboard navigation, without that, the menu doesn't work when using only the keyboard. Worth noting the menu stays "sticky" only with links with an href attribute # or links with target="_blank" regardless if they're external or internal links. The reason is: focus stays on the clicked menu item link.

I'm not even sure this should be fixed, as there's no reason to use links to # and maybe it's acceptable to see the menu still open when closing a browser tab previously opened by a link with target="_blank". In any case, I'd recomment to not use blur() as it would cause a focus loss.

[nilamacharya]

Is there any updates on this ticket ?

[sabernhardt]

mobile menu, expanded

[sabernhardt]

I recommend continuing this discussion on the test theme repository:
​https://github.com/WPTT/theme-test-data/issues/50

The menu items need meaningful links for people on smaller devices and for basically anyone who does not use a mouse. I would rather not edit the script for this special case that sites hopefully do not use.