Ionic-framework: ionic side menu Issue
I am facing side menu issue in some devices, not all devices, on some android devices it opens and didn't close when routing changes but on some devices, it works fine. I don't know what is happening, I am facing this problem in three different projects
here is the code which I wrote in app.component.html
`
<ion-content class="back">
<div style="text-align: center !important;margin-top: 35px;">
<h2 style="color: #051F90 !important;">Menu</h2>
</div>
<ion-list no-padding lines="none" >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" lines="none" class="background">
<ion-item class="menu" text-center [routerDirection]="'root'" [routerLink]="[p.url]" lines="none">
<ion-label lines="none" >
<ion-icon style="color:white" slot="start" [name]="p.icon"></ion-icon>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
<div style="text-align: center !important;margin-top: 35px;" (click)="logout()">
<h3 style="color: #051F90 !important;">Logout</h3>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet main ></ion-router-outlet>
`
here are the dependencies:
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/fire": "^5.2.1",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/clipboard": "^5.13.0",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.13.0",
"@ionic-native/stripe": "^5.13.0",
"@ionic/angular": "^4.7.1",
"bkash": "^0.3.0",
"cordova-android": "8.0.0",
"cordova-browser": "6.0.0",
"cordova-clipboard": "^1.3.0",
"cordova-plugin-fcm-with-dependecy-updated": "^3.0.0",
"cordova-plugin-stripe": "^1.5.3",
"core-js": "^2.5.4",
"firebase": "^6.5.0",
"ngx-countdown": "^8.0.0",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
aabi0044
All 40 comments
Thanks for the issue. Can you provide a repo with the code required to reproduce this issue? Also, which devices are you seeing this issue on?
liamdebeasi
on 7 Oct 2019
https://github.com/aqibferoz/Points-mania
repository link
and I am facing this issue on some latest android devices as well as some old android devices. Huawei Honor 8X (this is the device where I am facing this issue)
works fine on Samsung j7 pro and works fine on some Q mobile, idont know the models of that.
aabi0044
on 7 Oct 2019
Thanks for the follow up. What is the user agent string when running it as a standalone app? You can find this by logging navigator.userAgent when inspecting the standalone app using Chrome Dev Tools.
liamdebeasi
on 7 Oct 2019
use 'aabi1' as user name
'asd123' as a password
aabi0044
on 7 Oct 2019
I'm having a similar issue on iOS with the side menu and I opened an issue here #19500
I know I need to provide a repo I just don't have time to put it together right now since it's only occurring on an actual device. This bug does not appear on emulators.
kyleabens
on 8 Oct 2019
This is also happening for me on android and ios devices but not in the browser. ionic version 5.4.1. Menu opens but will not dismiss using either ion-menu-toggle or menuCtrl.close()
staticbuzz
on 8 Oct 2019
@staticbuzz Are you getting any errors in the console?
liamdebeasi
on 8 Oct 2019
@liamdebeasi No errors in the console, no warnings either.
staticbuzz
on 8 Oct 2019
Ah interesting. What version of Ionic Framework are you using? (v5.4.1 is likely the CLI version -- latest version of the framework is 4.10.1). You can find this by running ionic info in your project's directory.
liamdebeasi
on 8 Oct 2019
@liamdebeasi
Ionic:
Ionic CLI : 5.4.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.10.1
@angular-devkit/build-angular : 0.802.1
@angular-devkit/schematics : 8.2.1
@angular/cli : 8.2.1
@ionic/angular-toolkit : 2.0.0
Capacitor:
Capacitor CLI : 1.2.1
@capacitor/core : 1.2.1
Cordova:
Cordova CLI : 8.1.2 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
ios-deploy : 2.0.0
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.11.3
OS : macOS Mojave
Xcode : Xcode 11.0 Build version 11A420a
If anyone has any code/consistent steps to reproduce, please feel free to post them. I am trying the repo that @aabi0044 provided, but I have been unable to reproduce this issue. Is this issue happening on certain iOS/Android devices, or all iOS/Android devices? Thanks!
liamdebeasi
on 8 Oct 2019
@liamdebeasi
```
Ionic CLI : 5.4.1 (C:\Users\Ionic\AppData\Roaming\
Ionic Framework : @ionic/angular 4.9.1
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.1.0
cordova-res : 0.6.0
native-run : 0.2.8
Android SDK Tools : 26.1.1
NodeJS : v10.16.3
npm : 6.9.0
OS : Windows 10
```
Have had this issue on a Huawei P20 and a Samsung Galaxy S7. Haven't been able to test on any other physical devices but issue is also present in iOS emulator.
staticbuzz
on 9 Oct 2019
@liamdebeasi Just updated to 4.10.2 and the issue is resolved. I made no other changes except to update. Thanks all!
staticbuzz
on 9 Oct 2019
@aabi0044 Can you confirm that updating to Ionic 4.10.2 fixes the issue for you?
liamdebeasi
on 9 Oct 2019
no it is not resolved that way. and now I am getting this issue after changing the version on that device which wasn't detected before.
aabi0044
on 9 Oct 2019
now I am facing on Honor Play Device which was working fine before (on the previous version )
aabi0044
on 9 Oct 2019
@aabi0044 Can you provide any more steps to reproduce? So far I am unable to reproduce this issue. Maybe a video of the issue happening?
liamdebeasi
on 9 Oct 2019
aabi0044
on 9 Oct 2019
@aabi0044 What is your user agent when running the app on your device? You can find this by logging navigator.userAgent to the console when inspecting the app with Chrome Dev Tools.
liamdebeasi
on 10 Oct 2019
I am having an issue after building the .apk and not in the browser so I don't know that how to check the user agent while running the app on mobile phone and I am not getting the idea that how navigator.userAgent is related to this issue.
please help me!
I am facing clients losing trust on the ionic and putting a penalty on me for this bug,
a friend of mine is having the same issue and I am facing this bug on two different ionic apps and for now I am just building for the android only, later on, I am afraid if it appears on IOS too.
aabi0044
on 16 Oct 2019
You can inspect the app by following these steps: https://developers.google.com/web/tools/chrome-devtools/remote-debugging
liamdebeasi
on 16 Oct 2019
me to have same problem in android 9 version menu not close.... plz help me out of this problem..
sreeroopnaidu
on 17 Oct 2019
Ionic:
Ionic CLI : 5.3.0 (C:\Users\hp\AppData\Roamingnpmnode_modules\ionic)
Ionic Framework : @ionic/angular 4.9.1
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Capacitor:
Capacitor CLI : 1.2.1
@capacitor/core : 1.2.1
Cordova:
Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v10.16.3 (C:\Program Filesnodejsnode.exe)
npm : 6.11.3
OS : Windows 10
sreeroopnaidu
on 17 Oct 2019
@liamdebeasi
this is the error shown when inspect app....
Uncaught (in promise) TypeError: Cannot read property 'updateTiming' of undefined
at getWebAnimations.forEach.animation (vendor-es2015.js:106454)
at Array.forEach (
at updateWebAnimation (vendor-es2015.js:106453)
at Object.update (vendor-es2015.js:106496)
at childAnimations.forEach.animation (vendor-es2015.js:106492)
at Array.forEach (
at update (vendor-es2015.js:106491)
at Object.direction (vendor-es2015.js:106168)
at Menu.startAnimation (38-es2015.js:238)
at Menu._setOpen (38-es2015.js:211)
sreeroopnaidu
on 17 Oct 2019
@sreeroopnaidu Please update to the latest version of Ionic. That issue has already been fixed.
liamdebeasi
on 17 Oct 2019
In my case closing the menu is not working, I have this:
async ionViewWillEnter() {
this.menuController.close()
this.menuController.enable(false)
}
Also testing with a menuId because I was getting these warnings:
[DEPRECATED][ion-menu] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
<ion-menu>...</ion-menu>
<div main>...</div>
AFTER:
<ion-menu contentId="my-content"></ion-menu>
<div id="my-content">...</div>
[DEPRECATED][ion-split-pane] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
<ion-split-pane>
...
<div main>...</div>
</ion-split-pane>
AFTER:
<ion-split-pane contentId="main-content">
...
<div id="main-content">...</div>
</ion-split-pane>
But the same error, closing the menu from my login page is not working (Debug from Desktop please) :(
What do you think guys? 🤔
Any help is really appreciated 👍
jdnichollsc
on 28 Oct 2019
Can you provide a repo with the code required to reproduce this issue?
liamdebeasi
on 28 Oct 2019
repo link : https://github.com/aabi0044/sidebarissue
aabi0044
on 29 Oct 2019
what???
------------------ 原始邮件 ------------------
发件人: "high1"<[email protected]>;
发送时间: 2019年10月29日(星期二) 晚上6:36
收件人: "ionic-team/ionic"<[email protected]>;
抄送: "Subscribed"<[email protected]>;
主题: Re: [ionic-team/ionic] ionic side menu Issue (#19572)
repo link : https://github.com/aabi0044/sidebarissue
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.
zhangbo126
on 29 Oct 2019
repoistory link where i am facing bug
aabi0044
on 29 Oct 2019
Thanks for the repo @aabi0044. How do I login?
liamdebeasi
on 29 Oct 2019
create an account this app is attached with firebase so it will allow you to get in by normal signup sign in flow . thanks
aabi0044
on 29 Oct 2019
In my case I had that issue by a WebComponent created with StencilJS + Ionic, after remove that dependency the menu is working again 🤔
Is this configuration Ok to extend Ionic Components?
jdnichollsc
on 29 Oct 2019
@jdnichollsc It's possible that your inclusion of HammerJS could have caused the issue. HammerJS is known to interfere with our own internal gesture system.
@aabi0044 What do I need to do to reproduce the issue? I am opening/closing the menu via the menu toggle as well as swipes on my Motorola G4 (Android 7) and everything seems to be working fine.
liamdebeasi
on 29 Oct 2019
@liamdebeasi I removed hammerjs and still having issues with the menu, closing the main menu of the app is not working, having a wrong behavior of some components when I try to use a Stencil component extending Ionic components with the above configuration :/
jdnichollsc
on 10 Jan 2020
any solution for this ? menuController.enable(false) dont work but when I put it in setTimeout it works!
maroodb
on 30 Mar 2020
@liamdebeasi I was wondering if you have any stencil component extending Ionic components to be able to reproduce this issue
jdnichollsc
on 30 Mar 2020
In my case I had that issue by a WebComponent created with
StencilJS+Ionic, after remove that dependency the menu is working again 🤔
Is this configuration Ok to extend Ionic Components?* https://github.com/proyecto26/stencil-ionic-components/blob/master/src/global/global.ts * https://github.com/proyecto26/stencil-ionic-components/blob/master/src/global/global.scss Thanks in advance! 😅
Did you find any solution? I have the same issue!
hanifnouhi
on 25 Nov 2020
@jdnichollsc It's possible that your inclusion of HammerJS could have caused the issue. HammerJS is known to interfere with our own internal gesture system.
So whats the solution? Couldn't we create a web component with stenciljs and ionic/core and use it in an ionic application?
hanifnouhi
on 25 Nov 2020
So whats the solution? Couldn't we create a web component with stenciljs and ionic/core and use it in an ionic application?
Not from my experience, but let me know if that works for you :)
jdnichollsc
on 26 Nov 2020
Related issues
daveshirman
·
3Comments
vswarte
·
3Comments
brandyscarney
·
3Comments
aslamj
·
3Comments
masimplo
·
3Comments