Ionic-framework: bug: ASSERT: can not be animating in menuController.swipeGesture(false, 'main')

[Yomyer]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.1
   @angular-devkit/build-angular : 0.802.0
   @angular-devkit/schematics    : 8.2.0
   @angular/cli                  : 8.2.0
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : browser 5.0.4, ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 23 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/yerko/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.15.2 (/usr/local/Cellar/node@10/10.15.2_1/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug

It only happens when I try to off the swipeGesture. I have tried it in several ways:

await this.menuCtrl.swipeGesture(false, 'main');

document.querySelector('ion-menu-controller').swipeGesture(false, 'main')

this.menuCtrl.get('main').then((menu: HTMLIonMenuElement) => {
   menu.swipeGesture = true;
});

But all with the same result.

ASSERT: can not be animating

This is the part of the code I use, in previous versions it worked perfectly.
Basically what it does is that when the modal opens, it closes the menu (if it is open) and doesn't let it swipe so that it doesn't reopen unintentionally when the user is navigating through the modal.

       this.current = await this.modalCtrl.create(options);

       await this.menuCtrl.swipeGesture(false, 'main');

       this.current.present();

       this.current.onWillDismiss().then(async response => {
            await this.menuCtrl.swipeGesture(true, 'main');
       });

Thanks

[berkelmas]

i only get the same error on android platform. On ios, everything works fine.

[pieter-janDB]

bump - same issue

[bastien612]

Same here when I click 2 times on an ion-menu and I try to access "isOpen" in a click method.

I have succefully produce a freeze on iOS and Android.

File TS :

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  @ViewChild(IonMenu, { static: false }) ionMenu: IonMenu;

  /**
   * @ignore
   */
  constructor(
              private navCtrl: NavControllerService) {

  }

  navPush(page: string): void {
    if (this.ionMenu.isOpen()) {
      this.navCtrl.push(page);
      this.menuCtrl.enable(false);
    }

File HTML :

<ion-app>
    <ion-menu id="account" menuId="account" type="push" side="end" contentId="menu-content" swipeGesture="true">
        <ion-content>
            <ion-menu-toggle>
                <ion-list lines="none">
                    <ion-item (click)="navPush('/help')">
                        <span class="md-icon" slot="start">contact_support</span>
                        <ion-label>{{ 'label' | translate }}</ion-label>
                    </ion-item>
                </ion-list>
            </ion-menu-toggle>
        </ion-content>
    </ion-menu>
</ion-app>

In ionic framework code, an assert fired when the animation of the menu is running provoke a crash.

Below some screenshots of the error:

Ionic info :

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.11.2
   @angular-devkit/build-angular : 0.803.12
   @angular-devkit/schematics    : 8.3.12
   @angular/cli                  : 8.3.12
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   cordova (Cordova CLI) : 9.0.0 ([email protected])
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 20 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Developpement\AndroidSDK)
   NodeJS            : v10.14.0 (C:\Developpement\Nodejs\node.exe)
   npm               : 6.10.2
   OS                : Windows 10

I hope you will be able to fix this easily.
I'm available for any further information you may need.

[gitdisrupt]

It _might_ be the case that the error ASSERT: can not be animating is _not_ triggering due to a bug, although i cannot say that with certainty.

The following behavior triggered the same error in my case:

1. Toggle the side menu open
2. Tap a link which exists inside an ion-menu-toggle in the side menu which automatically triggers the menu to close in addition to triggering a click event i set on the link which calls a logout() method in my app component.
3. After logging out the user, the very next task in my logout() method was to disable the swipe gesture, and with that i got the ASSERT: can not be animating error

I suspected that i might have been disabling the swipe gesture too early since both the animation of the menu closing and my logout() method are running asynchronously.

To test this theory, i wrapped the line that disables the swipe gesture in a setTimeout() of 1 second and i no longer get the error.

So i am assuming the menu cannot be animating, just as the error implies, when attempting to set the gesture control to false

Can anyone from the ionic team respond?

What i am doing to avoid the error is to avoid using an ion-menu-toggle component.
It is more work, but i am using the menuController.close() method to close the menu programmatically inside of my logout() method, and in the menuController's .then() callback i finally set the swipe gesture to false. This ensures that the menu has finished closing at which point it is safe to set the swipe gesture to false.

[BassamHabash]

Hi All,

I have the same issue, is there any fix for it?

[bastien612]

I had to disable the menu during swipe.

@gitdisrupt was right : an error is normal on this case. The menu should not have been clickable.

But the error is very confusing. The use of an assert is violent when a clear error message would have been nice.

[Jahrenski]

And clearly should not have a debugger; thrown in there either.

[Gregcop1]

any news on this?

[rajashekaranugu]

Hello All I also have same issue, Any updates on this?

[amanitequeen]

Hello,

I have this issue on ionic serve when I change the status "disabled" on ion-split-pane. (note : there are two outlets in the ion split pane). I don't understand why I get thios error because my application still works. But I have the problem in ionic serve when it hits "debugger" (seriously why did you put a debugger). On android the application work fine and the error is only in console log, but in ios is freezes the application

Could you at leat remove te debugger ?

[johannesf95]

@manucorporat @liamdebeasi Please remove the assert statements from ion-menu as it makes normal debugging with opened dev-tools a real pain every time I open the menu!

[aub]

It would be really great to get rid of the debugger here. I'm having a similar issue and it doesn't cause an actual problem in the app but the debugger stopping it from running definitely does.

[derman10]

i have the same problem. Any solution or workarround please?

[Chuuone]

Same problem here. Would be nice if the ionic team gave us an update on this? This issue prevents you from using the whole component.

[MitchAguilar]

I do not understand the nature of the error therefore I have not been able to find a solution, however I think it is an early call to the Menu before finishing the animation of its appearance, for this reason I think that the team would ideally Ionic would give us greater clarity, since according to what I have investigated it is an internal error of the component ... It is activated before the end of the initial animation which reproduces in the total failure of the component.

In my case this is what the debugger teaches me, I am not very experienced in Ionic. If someone has found a solution and could help me, I would be immensely grateful.

[Chuuone]

For me this error was actually occurring because i would have markup like this:
<ion-menu-toggle> <ion-item [routerLink]="login/"> </ion-item> </ion-menu-toggle>
Then also a router subscribing to NavigationEnd. The logic in there would decide whether the menu should enable or disable.

Now because ion-menu-toggle fires the menu toggle asynchronously, navigation happens before the menu closes completely and ends its animation, which in turn would mean i am disabling the menu while its still closing. The workaround for me was to change my markup so that i have a function that awaits menu closure and then safely navigates to the login page, allowing my logic in the subscriber to run as well.

At the end of the day, <ion-menu-toggle> can cause you unexpected behaviour because you expect it to finish its thing before continuing any bubbled up functions that are also triggered by the onClick event, in my case routerLink.

If you get this error, go over your code and make sure you dont run any menu manipulation methods such as:
menu.swipeGesture()
menu.enable()
During the opening or closing phase of the menu.

I dont see how ionic can fix this to be fair, we just need to tailor our code around the menus logic, Not the other way around. I dont think its possible to prevent the current behaviour of <ion-menu-toggle>.

[bastien612]

Guys, I told you : an error is normal in that case because the user click on the menu while the opening/closing animation is running.

So the simple solution is disable the menu during animation or wait for the end of the swap animation.

What ionic should fix is the "assert" -> it should be a normal error with a logger. And, since it is javascript, it should be invisible to the end user and nothing should happen (especially not a crash).

Secondly, the current error message is very unclear. It should be improved.

[kamranayub]

Actually running into this separately in a Cypress test when opening/closing the ion-menu-button menu. It bombs on the test even though it shouldn't affect the test itself.

Even though Cypress is supposed to wait until animations are done, I still had to put a manual cy.wait(300) or so in there for good measure.

[Nabeelhassan]

firstly push a release that gets rid of the debugger.
Debugging the app via safari or chrome with dev tools pauses on the debugger. its very frustrating

[curiouscod3]

Same error(can not be animating) is here with 5.2.3 as well.. When using ion-split-pane on the bigger screen, it happens.

I think Ionic core team better focuses on Angular more..

[AngeloReppucci]

Same error here. It happens when using ion-split-pane for me too and switching to a different route from an open drawer.

[iknowindigo]

I'm having the same issue. Just display the error, but get rid of the debugger break. You're breaking my app when it's no big deal.

[ericgopak]

Getting same error, in cases if a user clicks on the ion-menu-button while the animation is still ongoing. Will be happy if you get rid of debugger in there (which is a nice try to force us to report the issue, but is annoying if you don't do anything about it in more than a year!).

[gloversure-kbu]

+1

[factorycreacom]

I had a problem and I think I found the solution (Sorry for my bad english).
If you are calling menuCtrl.close () operation and doing router redirection, use the code like this eg:
this.menuCtrl.close().then(()=> { this.navCtrl.navigateRoot('home'); //or your route });

[mgremiral]

I solved the problem by removing the commented line:
this.platform.ready().then(() => { // this.menu.open('first'); });

I guess it's because the menu wasn't enabled yet.