Foundation-sites: [6.2] [Dropdown Menu] [Flexbox] Dropdown Menu Always Open

[dougmacklin]

How can we reproduce this bug?

1. Create a new Foundation for Sites project (6.2.0) using the CLI
2. Enable Flexbox Mode
3. Add dropdown menu code with sub menu items

What did you expect to happen?

Dropdown menu works correctly, only opening when user hovers over its parent.

What happened instead?

Dropdown menu is always open because it has display: flex overriding display: none

Test case:

Strangely, this issue does not occur when using CDN links: codepen

[gakimball]

In your app.scss file, try moving @include foundation-menu above @include foundation-dropdown-menu and see if that works.

[dougmacklin]

Thanks @gakimball that fixed it! Want me to submit a pull request?

[gakimball]

We need to make sure it doesn't break anything else menu-related, so if you'd like to submit a pull request, could you also review the docs pages for menu and dropdown menu to ensure nothing else breaks?

[dougmacklin]

All of the related components appear to be working fine after the change. I noticed that in foundation.scss, @mixin foundation-everything already includes the components in the following order:

@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;

However, above that in the @imports, foundation-menu is imported after foundation-dropdown:

@import 'components/drilldown';
@import 'components/dropdown-menu';
@import 'components/dropdown';
@import 'components/flex';
@import 'components/flex-video';
@import 'components/label';
@import 'components/media-object';
@import 'components/menu';
@import 'components/menu-icon';

I'm guessing this might be why using the CDN links eliminates this issue.

Should I move the menu and menu-icon imports above the drilldown import in this file to better align with the mixin? I'm just not entirely familiar with how the CLI install builds out the resulting app.scss file and whether or not this will fix it.

[gakimball]

The order of the imports doesn't matter, only the @includes.

However, I'm guessing the two starter projects haven't been updated. If you want to create pull requests for the app.scss on zurb/foundation-sites-template and zurb/foundation-zurb-template, I can pull them in.

[dougmacklin]

Ah that makes sense. Created the two pull requests:foundation-sites-template, foundation-zurb-template. Thanks!

[gakimball]

Merged both. Thanks friend :)

[calderJamNet]

@gakimball this is still happening, is the accepted solution still just to move the location of foundation-menu?

[maland]

still happening with 6.4.1, fix is also still the same and working

[nikolasgd]

Second this! Took me and my co-worker hours trying to fix the "stuck" menu in a new Rails 5 app with Foundation 6 (gem version: foundation-rails 6.4.1.2). Is the accepted solution still to move the two lines like in @gakimball's comment?

[dpassarini]

Same here. I tried to move the lines as explained above. But I still have the very same problem

[colin-marshall]

@nikolasgd @dpassarini were you able to resolve this?