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-disable-hover enabled on our main menu to achieve the navigation workflow that we desire.
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 :