bug: Menu freezes if closed and disabled while animation is in progress

[damirarh]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

If you attempt to close and disable the menu while the opening animation is still in progress, the menu will freeze in place. The application will need to be reloaded to resume normal operation. The following error message is emitted in the console:

vendor.js:104532 Error: ASSERT: can not be animating
    at assert (vendor.js:106591)
    at Menu.updateState (38.js:410)
    at Menu.disabledChanged (38.js:82)
    at vendor.js:105830
    at Array.forEach (<anonymous>)
    at setValue (vendor.js:105827)
    at HTMLElement.set [as disabled] (vendor.js:105868)
    at Object.enable (vendor.js:106778)

Expected behavior:

The menu should close and become disabled even if these calls are issued while the opening animation is in progress. The opening animation should either be interrupted or continue till the end before the menu is closed.

Steps to reproduce:

I encountered the issue with a menu item that triggered navigation to another page. In the ionViewWillLeave method of the current page I had the following code:

await this.menuCtrl.close();
await this.menuCtrl.enable(false);

The key to reproducing the issue is to click on the menu item quickly after clicking the menu toggle button to open the menu. The menu animation must still be in progress at that point.

The issue can also be reproduced if the two lines above are directly placed in the menu item handler. That's what I did in the sample application.

Related code:

https://github.com/damirarh/ionic-menu-freezing

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.8 (C:\Users\damir\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res : not installed
   native-run  : 0.2.7

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[djabif]

I can confirm this bug is still happening in Ionic 5 rc2.
How should we do to enable the side menu and not getting this error?
I think this bug is similar as #19676
Thanks

[damirarh]

@djabif I added a guard to all menu item handlers which waits for the menu open animation to complete:

if (await this.menuCtrl.isOpen()) {
  // perform the requested page navigation
}

I wrote a blog post about it with a more detailed explanation and a link to a sample project in the comments.

[RobinGiel]

You can do this:

<ion-menu [swipeGesture]="menuSwipe.swipe" (ionDidClose)="didClose($event)">

in ts:

didClose(e){
this.menu.swipeGesture(false);
}

[Radecom]

The same happens to me with:
"@ionic/angular": "^5.0.6"

[burdokat]

This happened to me. First I had the menu enabled and disabled inside a guard. But I had problems with the menu being activated inside pages where it should not. Upon code refactoring, the problem started according to #19676, entering debug mode. Upon further inspection, it just boils down to order of execution. If you open the menu, it must be enabled first. And, any animation and transitions of the menu must be executed successfully, without being halted by any other means.

So, for more verbosity, just keep in mind that the menu should only be opened after the menu is successfully enabled. And whenever you are disabling the menu, make sure that it is closed first and that the close animation succeeds. Failure to do so, will throw you errors.
With that in mind, the solution really depends on the approach you are using in your code.
For example: when deactivating any menu, you can actually wait for the close animation to succeed with this code snippet:

async yourAsyncMenuDeactivationFunction(menuId: string): Promise<boolean>{
  return await this.menuCtrl.close(menuId).then(() => this.menuCtrl.isOpen(menuId));
}

The close() method closes the menu, and then the isOpen() method will emit after the close animation succeeds, hence, isOpen() will always emit false. Then you can return that promise and use it to execute anything else afterwards (deactivate the menu, navigate back, guards, logout, etc...)

Just a personal comment: I really don't think this should be reported as a bug. I think the solution has to be documented on how the menu should be properly used. Just saying.

[dkerkez]

This is working for me.

Try disabling the menu after the menu is closed.
Add (ionDidClose)="menuDidClose()" to menu HTML and inside menuDidClose disable menu.

public menuDidClose(){
    if(this.disableSideMenu)
    {
      this.menu.enable(false);
      this.menu.swipeGesture(false);
      this.disableSideMenu = false;
    }
  }

[anayarojo]

The following works for me:

Replace this code:

<ion-menu>
    ...
    <ion-menu-toggle>
        <ion-item [routerLink]="['./']" (click)="signOut()" class="item-gray" color="sofiaxt-dark" lines="full" detail>
        <ion-label>Cerrar sesión</ion-label>
        <ion-icon slot="start" name="lock-closed"></ion-icon>
        </ion-item>
    </ion-menu-toggle>
    ...
</ion-menu>

public async signOut() {
    const loading = await this.uiService.showLoading('Closing session...');
    await this.authenticationService.signOut();
    this.navController.navigateRoot('/login');
    loading.dismiss();
}

With this one:

<ion-menu>
    ...
    <ion-item [routerLink]="['./']" (click)="signOut()" class="item-gray" color="sofiaxt-dark" lines="full" detail>
        <ion-label>Cerrar sesión</ion-label>
        <ion-icon slot="start" name="lock-closed"></ion-icon>
    </ion-item>
    ...
</ion-menu>

public async signOut() {
    const loading = await this.uiService.showLoading('Cerrando...');
    if (await this.menuController.isOpen('userMenu')) {
        await this.menuController.close('userMenu');
        await this.menuController.enable(false, 'userMenu');
        await this.authenticationService.signOut();
        this.navController.navigateRoot('/login');
    }
    loading.dismiss();
}

Summary:

• Remove <ion-menu-toggle>
• Ask for await this.menuController.isOpen()