Foundation-sites: ResponsiveMenu broke dropdown menu after return to original breakpoint

[AlexeySvidentsov]

What should happen?

I have Responsive menu: accordion on mobile and dropdown on desktop. At first initializing dropdown works fine. After changing viewport size to mobile menu converts to accordion and it works fine as well. But when i return to desktop/dropdown version - dropdown initialize seems to be failed. When i hover on item that has dropdown - it opens, and when i move mouse out of the item it should disappear.

What happens instead?

Instead i've got console error, and submenu keep showing

Uncaught TypeError: Cannot read property 'autoclose' of null

foundation.dropdownMenu.js:150

Possible Solution

...

Test Case and/or Steps to Reproduce (for bugs)

Test Case: codePen

Foundation Docs for ResponsiveMenu has same issue - https://foundation.zurb.com/sites/docs/responsive-navigation.html#drilldown-dropdown-menu

Your Environment

• Foundation version(s) used: 6.5.1
• Browser(s) name and version(s): Chrome, FireFox, Edge
• Device, Operating System and version: Windows 10
• Link to your project:

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.

[AMarffy]

Hi Alexey! Your codepen actually works, since it's currently linked to Foundation 6.5.0's javascript.
(But there's still a console-error though.)
Maybe it should be linked to 6.5.1 for demonstration purposes.
I'm struggling with the exact same issue. Do you know if there's a patch for this? Thanks, Andrej

[AlexeySvidentsov]

Thank for correction. Replaced with actual version.
For now, i've just cutted out autclose property, and the next closingTime property, since i'm not using it.
But still looking for the proper solution.

[AMarffy]

Thanks! I will try that too …

[Dureaghin]

Same issue. "hasSub is not defined" in foundation.dropdownMenu.js

Alexey, could you please provide your temp solution?

[DanielRuf]

Please test https://codepen.io/DanielRuf/pen/jJVjmz

[DanielRuf]

See https://github.com/zurb/foundation-sites/pull/11715

[Dureaghin]

Works for me! Thank you so much Daniel.

Alex.

[thejonroberts]

Just adding that I am seeing the same issue in 6.5.3 while trying to upgrade some packages. Daniel's PR fixes the issue. Will have to wait on it. Thanks Daniel.

[DanielRuf]

Hi @thejonroberts
You can use https://github.com/zurb/foundation-sites/pull/11715.patch or https://github.com/zurb/foundation-sites/pull/11715.diff with patch-package or patch to fix it in your projects.

There is currently no activity around Foundation Sites so the PR will not be merged so soon.

[thejonroberts]

I appreciate the heads up, Daniel. I was considering using a fork, but ultimately decided to just disable the hover open behavior to work around this problem.

In case anyone else is looking for that solution, you can set data-disable-hover=true, data-click-open=true on the dropdown element, as described in the foundation docs.

[Shirisu]

I hope the PR will be merged soon - we also run in this problem.
Disabling the hover isn't an option for us unfortunately.

[DanielRuf]

Hi @Shirisu,

the PR was already merged. It will be available in 6.6.0.

[Shirisu]

Hi @Shirisu,

the PR was already merged. It will be available in 6.6.0.

Awesome, thanks for the information! :)