search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.01k stars 13.51k forks source link

bug: menu creates gesture on document, swiping on page opens menu on different page #19410

Open kensodemann opened 5 years ago

kensodemann commented 5 years ago

Bug Report

Ionic version:

[x] 4.x

Current behavior: I have a customer who has a primarily tabs based app. However one of the pages also has a side menu with some other stuff.

I have created a sample that shows the issue where tab1 and tab3 are "normal" and tab2 has a side menu with the contentId set to the ion-content of the tab2 page. If tab2 page has been visited and the user goes to either tab1 or tab3 and swipes from the left the menu does not open (good, it should not), but when you then go to tab2 the menu is open. Somehow the swipe on tab1 or tab3 opened the menu on tab2...

Expected behavior: menu on tab2 only swipes open when you are on tab2

Steps to reproduce:

  1. clone and serve repo below
  2. visit all three tabs (or at least tab2), but leave the menu on tab2 closed
  3. go to tab3 or tab1
  4. swipe from the left
  5. go to tab2
  6. note that the menu is open even though we did not swipe on this page

Related code:

https://github.com/kensodemann/demo-single-page-menu

insert short code snippets here

Ionic info:

Ionic:

   Ionic CLI                     : 5.3.0 (/Users/ken/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.4
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.3 (cordova-lib@9.0.2)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (/Users/ken/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.15.3 (/Users/ken/.nvm/versions/node/v10.15.3/bin/node)
   npm               : 6.10.3
   OS                : macOS Mojave
   Xcode             : Xcode 11.0 Build version 11A420a
liamdebeasi commented 3 years ago

I can reproduce this behavior. The problem here is that ion-menu creates the swipe gesture on the document rather than the page it is presented on: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu/menu.tsx#L194

The end result is that swiping on Tab 3 will open the menu on Tab 2.