[RC2] <ion-menu type="overlay"> frequently closes by itself

[jourdan-jobox]

Short description of the problem:

I have an <ion-menu> in app.html that, when opened, frequently closes by itself almost instantly (note: it doesn't happen all the time, but at the very least about ~50% of the time). This was previously working as expected before the RC2 update.

What behavior are you expecting?

I'm expecting my side menu to close only when I tap on one of the links in the side menu, or when clicking on the background overlay.

Steps to reproduce:

1. Create an <ion-menu> overlay in an app.html file
2. Have a button that toggles the ion menu open.
3. Watch it close by itself sometimes?

This is my app.html:

<ion-menu [content]="content" type="overlay" class="sidebar">
  <ion-content class="sidebar-content">
    <img class="sidebar-logo" src="assets/img/general/white-logo.svg">
    <ion-list class="sidebar-list">
      <button ion-item menuClose *ngFor="let link of links" (click)="goToPage(link.pageObj)" class="sidebar-item">
        {{ link.title }}
      </button>
      <button ion-item menuClose (click)="logout()" class="sidebar-item">
        Log Out
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

This is my dashboard.html page that contains the menu icon that opens the Menu:

<ion-header class="header">
  <ion-navbar hideBackButton="true">
    <ion-title>{{ pageTitle }}</ion-title>
    <button ion-button icon-only menuToggle right>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

This seems to have happened with one of the code changes after RC1 was released, because this was working when I was on RC1.

Let me know if there's anything else I can share that may help with this issue! It might sound weird but I didn't make any coding changes for this to happen...

Which Ionic Version?

2.0.0-rc.2

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.3.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[jourdan-jobox]

Hi guys,

An update. This only happens with an type="overlay" menu, I've tried reveal and push and they work as expected. So that helps narrow it down!

[panduit-psh]

I can confirm that this happens every time in iOS no matter which type I use. The first time the menu is opened, it stays open. Subsequent attempts at opening automatically close the menu. Downgraded to rc1 and now it functions as expected.

[jourdan-jobox]

@panduit-psh Interesting, I wish I could know why a different type works for me so that you wouldn't have to downgrade but I'm not sure :(

[tinnocente]

same issue here, thanks for reporting it so I didn't have to 👍

[jfont555]

@manucorporat #6405

[panduit-psh]

This is still occurring in rc3.

[tinnocente]

@panduit-psh I might need to downgrade to RC1 since we are about to launch our iOS app. Is there a guide on how to do this?

[jgw96]

Hello all, thanks for opening an issue with us! Would you mind creating a plunker I can use to reproduce this issue using this template? Thanks!

[panduit-psh]

@jgw96 Here you go. Let me know if I posted it incorrectly.

On iOS, the menu opens and then closes right away.

Thanks for checking it out.

[tinnocente]

@panduit-psh Thanks for submitting the plunkr.

Not sure about @panduit-psh or @jourdan-jobox but for me, the issue does not occur while testing in the browser. It only occurs when testing on a live device whether I build the app on the phone or use Ionic View/Test Flight.

Can you two confirm that is the case for you as well?

[panduit-psh]

@tinnocente This only happens in iOS for me.

[manucorporat]

Can you guys try against nightly?

npm install ionic-angular@nightly --save

[panduit-psh]

@manucorporat I can confirm that the issue is fixed for me in 2.0.0-rc.3-201611282011. Thanks for the help.

[lincolnthree]

@manucorporat Having the same issue here. Using the nightly 2.0.0-rc.3-201611282011 resolved this for me as well.

[manucorporat]

@lincolnthree @panduit-psh glad to hear that! closing this issue...

Please feel free to reopen if you think this is still not fixed in nightly

[tinnocente]

type="push" is buggy but type="overlay" works very nicely. Thanks I can launch now :)

[manucorporat]

@tinnocente can you describe how the type=push is buggy?

[lincolnthree]

Out of curiosity. What was the issue / fix?

[lincolnthree]

And thank you :)

[tinnocente]

@manucorporat When I first upgraded to nightly I had it set to type="push". After building it onto my test iPhone the menu was no longer auto-closing however after the menu opened it was like there was a timeout where I could not close the menu for several seconds by tapping outside the menu. If I waited a couple of seconds then I could tap outside the menu to close it. If I tapped my "Close" button the menu would close as expected.

I have not experienced any bad behavior from "Overlay" so at least I can launch the iOS app now 👍

Hope that helps!

[lincolnthree]

Actually yes. I am seeing the same behavior. It takes several seconds before the menu will close via clicking outside. Menu toggle buttons work fine.