Foundation v6.6.1 (v6.6.0) breaks nested Dropdown Menus

While updating from Foundation v6.5.3 to v6.6.1 I noticed that the nested menus within our Dropdown Menus were no longer working. We have both data-click-open & data-disable-hover enabled on our main menu to achieve the navigation workflow that we desire.

Since my initial troubleshooting led me to think the issue was JavaScript related, I stepped through the click on one of the second level links to open a nested menu. During that I noticed a click was being triggered twice, so the nested menu was being opened, but then immediately closed. This lead me to compare the app.js files between the v6.5.3 install and the v6.6.1 (or v6.6.0) install. While going through the compare I noticed that within the handleClickFn function part of the Dropdown Menu code the e.stopImmediatePropagation(); lines had been removed. When I manually added those lines back into the v6.6.1 dist > assets > js > app.js file (or added it through custom JS that targeted all instances of role="menuitem") the Dropdown Menus went back to working correctly and I could access all levels of nested menus again. I double checked this functionality in a new install of Foundation through the Foundation CLI and everything functioned exactly the same as in my project.

I looked through your commit list and found that the e.stopImmediatePropagation(); lines were taken out as part of commit 3aad310. The commit mentions “If it was needed to prevent a duplicate behavior in a component, others methods should be used like debouncing the event.”, so maybe the change was not fully tested or implemented within Dropdown Menus.

For now I am going to implement the custom JS code to get the Dropdown Menus working correctly so the upgrade can keep moving forward. However, I really don’t like keeping custom JS code around to fix broken framework features. So if I’m missing some other setting that fixes this behavior and makes it work correctly, or a fix for this will be released soon, please let me know.

CodePen with broken nested Dropdown Menus and custom JS fix :

Hi @PDCflowMark,

Thanks for reporting this, we will check it.

See https://github.com/foundation/foundation-sites/issues/11457 and https://github.com/foundation/foundation-sites/pull/11465

It seems in this case we have to catch and refire the event.

Please take a look at https://github.com/foundation/foundation-sites/pull/11998

I think this type of “question” should be filed on GitHub instead as it’s an issue report.

We already have an issue there which is also linked in the PR :wink:
Also see Foundation v6.6.1 (v6.6.0) breaks nested Dropdown Menus