Bug in menu-trigger functionality on mobile

[essentialred]

Hey, I've come across a bug similar to issue #15 - maybe our specific use case can shed some more light:

Use: We are using jPanel for a mobile site, with animation set to true.

The issue: Touching the menu-trigger button would result in a tiny 'wiggle' but the menu would stay open. Touching anywhere else on the jPanelMenu-panel area closed the menu normally. On desktop, there was no issue, and also if animation was set to false there was no issue.

Debugging, we found that because the closeMenu function is called when the jPanelMenu-panel is clicked, menuIsOpen returns false by the time the click event was registered on the menu-trigger button itself. This resulted in the trigger button immediately opening the menu again.

Our solution was edit the closeMenu function so that the open state (n.setMenuState(!1)) is not set to false until after the animation is completed.

[imjoeybrennan]

I'm having this same issue. Can you show your solution in more detail by showing the edits/changes and noting which lines there on.
Thanks!

[Billeee]

I am having the same issue too

The suggestion of adding e.preventDefault(); in #15 (comment) did not seem to fix it for me either

at the moment i have just worked around the bug by setting duration: 50

[chadbush]

I'm having the same issue, and this behavior happens intermittently on left-side opening menus but consistently on a right-side opening menu. In other words, I cannot get a right-opening menu to close using menu-trigger no matter what.

• Setting duration: 50 does not completely eliminate this behavior.
• Adding e.preventDefault(); also does not help.
• Even setting animate: false does not elminate this behavior.

As a workaround, I've added a class using afterOpen: function() to style the .menu-trigger with display:none when the panel is open, but this is not ideal for usability.

[samIntegrateur]

I'm having the same issue when I'm on android default navigator or firefox mobile. On chrome mobile "Adding e.preventDefault();" it works. My only solution was to set "closeOnContentClick on false".

I like this plugin but it should be updated to fix this issue

[kleazenbee]

This work-around seems to be working for me: After the panel opens, I'm removing the ID from the trigger element. Then I'm able to tap the element (or anywhere, really) and have the panel close. After it closes, I put the ID back so I can open it again.

[chadbush]

I've taken it a step further, and now I have a 'close' button that appears to work too:

• afterOpen() - add a class to .menu-trigger that's styled display: none.
• afterOpen() - add a span to the menu container that's styled to look like a close button.
• afterClose() - remove both of the above.

I prefer not to use hacks, but the benefits of using this plugin for me even with this little hack outweight the costs of using some other solution. My navigation menu now functions just the way I imagine it would if this bug did not exist, and the hack only required me to write four extra lines of code.

[acolangelo]

Fixed with #27.