cornerstone icon indicating copy to clipboard operation
cornerstone copied to clipboard

onCartPreviewOpen() handler stops Foundation dropdowns from working in Mobile Nav Menu

Open pvaladez opened this issue 2 years ago • 0 comments

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.

pvaladez avatar Aug 18 '22 19:08 pvaladez