cornerstone
cornerstone copied to clipboard
onCartPreviewOpen() handler stops Foundation dropdowns from working in Mobile Nav Menu
Expected behavior
You should be able to move a component using a Foundation dropdown inside the mobile menu. For example, you should be able to move the Currency Selector component into the mobile nav.
Actual behavior
When the Currency Selector component is moved into the mobile nav, clicking on the Currency Selector dropdown causes the mobile nav to close.
The cause of this is the onCartPreviewOpen() handler in mobile-menu-toggle.js. The CartPreviewEvents.open event used here is a generic foundation dropdown open event, and any event generated in the header triggers this handler. The issue could potentially be fixed by adding a selector to the jQuery .on() call like this:
this.$header.on(CartPreviewEvents.open, '#cart-preview-dropdown', this.onCartPreviewOpen);
Steps to reproduce behavior
Place the Currency Selector component in the mobile nav menu, I'll say line 29 of navigation-menu.html. Then open the mobile nav menu on a mobile device and watch the mobile menu close when you click on the Currency Selector dropdown.