menuClose not close menu on (tap) event

[mifkys]

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When on menu item added (tap) listener, directive menuClose not close menu

Expected behavior:

menuClose must works with (tap) event like a (click) event.

Steps to reproduce:

Related code:

<ion-list>
        <ion-item *ngFor="let p of pages" menuClose detail-none (tap)="openPage(p)">
            <ion-icon name="{{p.icon}}" item-start></ion-icon>
        {{p.title}}
      </ion-item>
    </ion-list>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : 6.0.0 
    npm        : 3.10.10 

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having?

I just tried this by generating an app using our side menu template and replacing (click) with (tap) as such, but the app worked just fine (menu closes on tap):

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (tap)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

I tried this in Chrome and Safari. If this only happens on a particular emulator or device please let me know.

Thanks for using Ionic!

[mifkys]

I have a problem on iPhone 6 iOS 10.1 emulator. I will try today later on iPad 2 device.

[kensodemann]

I tried it on the iPhone 6 emulator and it worked just fine. Same for my iPhone 7 device. Both are running iOS 10.3, however. I will download the iOS 10.1 simulator and try it there (though that will likely take forever) to see if this has to do with iOS version.

[mifkys]

Very strange. I change pages with this.nav.setRoot() and use lazy load

[kensodemann]

I am just using the sidemenu template with very minor changes for the tap. It uses this.nav.setRoot() just like you are. It does not default to using lazy load, though. I will try lazy load.

[kensodemann]

I just switched my app to use lazy loading and loaded on an iPhone 6 iOS 10.1 simulator and it worked fine. I am going to have to close this as non-reproducible. If you can provide a GitHub repo with a sample application that duplicates the issue I will be happy to re-open it.

[mifkys]

@kensodemann, here I am. I created repo (modified Tabs template): https://github.com/mifkys/ionic3-nav-problems and record some videos:

Open pages with tap event on menu item. Page open after one tap but menu close only after second tap. Also menu closes only after second tap on menu icon: https://youtu.be/LZ54p5Pcqug

Open pages with click event on menu item. Page open only after few seconds and menu close immediately after this. Many clicks on item after open menu didn't do anything. Need to wait few seconds every time. This behavior exists not only emulator but on real device (iPhone 5 or something; I can ask client about device specs if needed). Also on this video I show difference between click and tap events on menu's items: https://youtu.be/kdFChZKx8T4

[kensodemann]

Thank you. I was able to duplicate the issue with using your project. The fix was to use WKWebView instead of UIWebView. Note that this is also consistent with Apple's directive to people developing on anything above iOS 8.

That also explains why I couldn't duplicate this in my sample application here. A lot of my test beds already have that installed since it really should be the default. Hopefully soon. I should have thought of that earlier. Sorry about that.

[mifkys]

U mean to use https://github.com/ionic-team/cordova-plugin-wkwebview-engine/, right?

[kensodemann]

Whoops, pasted wrong URL. Yes. I will fix that...

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.