ionic-framework: ion-menu error on swipe
Bug Report
Ionic version: [x] 4.x
Current behavior: When I swipe to open my side menu immediately after the app loaded, the app freezes. When I first tap the menu toggle button and then swipe, everything is fine.
Expected behavior: App doesn’t freeze.
Steps to reproduce: I was able to reproduce this in Chrome and sometimes I got to see an error (see stacktrace below). I’m even able to get the preview to freeze on the Ionic docs when I swipe just before the app’s first view is loaded: https://ionicframework.com/docs/api/menu
Related code:
The stacktrace below led me to this file: core/src/components/menu/menu.tsx of this repo.
The error comes from the loadAnimation function where this.menuInnerEl is undefined at that time:
const width = this.menuInnerEl!.offsetWidth;
Other information: Stacktrace:
zone.js:682 Unhandled Promise rejection: Cannot read property 'offsetWidth' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'offsetWidth' of undefined
at t.<anonymous> (n5wnzrch.entry.js:1)
at step (tslib.js:97)
at Object.next (tslib.js:78)
at tslib.js:71
at new ZoneAwarePromise (zone.js:910)
at Module.__awaiter (tslib.js:67)
at t.loadAnimation (n5wnzrch.entry.js:1)
at t.onWillStart (n5wnzrch.entry.js:1)
at onWillStart (n5wnzrch.entry.js:1)
at m (chunk-f56eaea8.js:1) TypeError: Cannot read property 'offsetWidth' of undefined
at t.<anonymous> (http://localhost:8100/70.js:44:4283)
at step (http://localhost:8100/80.js:158:21)
at Object.next (http://localhost:8100/80.js:139:51)
at http://localhost:8100/80.js:132:69
at new ZoneAwarePromise (http://localhost:8100/polyfills.js:3268:29)
at Module.__awaiter (http://localhost:8100/80.js:128:10)
at t.loadAnimation (http://localhost:8100/70.js:44:4107)
at t.onWillStart (http://localhost:8100/70.js:44:5351)
at onWillStart (http://localhost:8100/70.js:44:2193)
at m (http://localhost:8100/common.js:84:6209)
Ionic info:
ionic (Ionic CLI) : 4.10.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.2.0
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.5.0
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 31 (8 by maintainers)
Hi everyone,
I was able to reproduce this issue. We will look into it!
Thanks!
For anyone else getting stuck on this, it looks like this issue was already fixed in the latest ionic version, updating to
4.9.0seems to fix it for us 🎉For those still running into issues: Please update to Ionic 4.10.0. We fixed a few more things that should resolve any outstanding issues with the menu swipe. Thanks!
Here my Info:
Ionic CLI : 5.4.1 (/usr/lib/node_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
I fixed it for now using the
swipeGestureinput onion-menu. It’s set to false until the splash screen is hidden.@liamdebeasi I just installed and built this repo that demonstrates this issue. The debug and release apks are in the
releasesfolder. Since this is a minimal app, in order to replicate the issue, you need to frantically swipe right-to-left immediately after launching. After splashscreen disappears, swipe to see if left and right sidemenus operate as expected.I do have a more developed ionic app, AIT, that needs no frantic swiping, just swipe normally upon launching and the issue will be seen.