Side-menu problems - click vs. touch

Ionic Framework ionic-v3
1

I am having an issue on my laptop in Chrome with the side menu. The toggle button doesn’t seem to work for me. The menu flashes open sometimes, or sometimes nothing happens. It started in my application, but I have since seen the behavior on the documentation examples here: http://ionicframework.com/docs/v2/components/#menus

My laptop is touch-enabled and if I use my finger to do the toggle, it works fine. It also works fine if I tap my finger on the touchpad. It breaks when I use the left button on my touch pad which should be the equivalent of a left-click of a mouse. I’m not sure if it is supposed to work, but it wasn’t a problem for me until I upgraded to Beta 11. Now it flashes and sometimes it will open/close quickly when I click on my tab to change tabs. It is erratic. Will someone please explain what is happening? I am not sure if it is an Ionic problem or if it is something wrong with my laptop drivers. Since it just broke with Beta 11, it seems unlikely to be a hardware issue. I don’t have issues on other websites or on my computer with the functionality. It is only in my Ionic2 app and website demos.

2 Likes
2

I’m having the same issue as well - touchscreen works perfect but the mouse click is funky. I’ve found that if make it a point to drag the menu open and closed with my mouse then it seems to work. If I don’t drag the menu closed then it starts acting erratic and usually the next click anywhere on the screen will open the menu again. Haven’t found a better solution yet.

2 Likes
3

Same problem here… And I want to use my app as a PWA… Any workaround?

4

Any news on this? I’m facing this issue after upgrading to beta11, when using the app in a browser (for development), but on mobile it works fine. I can’t use in a browser because the menu keeps poping whenever I click anywhere.

For now I’m using this workaround, so that swiping the menu is disabled when not in native environment (I still can access the menu clicking in a menu toggle button):

<ion-menu [swipeEnabled]="native">

In my menu component I set the native boolean property with:

this.platform.ready().then(
    () => this.native = this.platform.is('cordova')
);

Anyway, hoping that this issue be resolved soon…

5

I can confirm that it is still an issue in RC0.

6

I can also confirm this is still an issue - upgrade to RC0 and download the conference app, then do a serve to Chrome. Thanks to @lucasbasquerotto for the fix in the interim.

1 Like
7

This is an old topic, but the bug still exists.
If someone is looking for a simple answer.

It seems that the click function never gets called.

So instead of:

<button ion-item menuClose *ngFor="let p of getLoggedInMoreMenuPages()" (click)="openPage(p)">
                    <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
                    {{p.title}}
                </button>

Change to:

.pointer {
cursor: pointer
}

<ion-item class="pointer" menuClose *ngFor="let p of getLoggedInMoreMenuPages()" (click)="openPage(p)">
                    <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
                    {{p.title}}
                </ion-item>