Ionic-framework: bug: menu stop working in an application that has two main page with each a side menu

[iamkinetic]

Bug Report

Ionic version:
[x] 4.7.X
[x] 4.8.X
[x] 4.9.0
[x] 4.10

Current behavior:
Application has two main pages. Each of these pages have a different side menu. When navigating the application this way, the menu stop being displayed.

Expected behavior:
Side menu should not stop being displayed when navigating.

Steps to reproduce:

1. Open side menu from initial page and click "Page # 2 with menu # 2
2. Navigation works, and side menu # 2 is displayed.
3. Open side menu and click "Page # 1 with menu # 1".
4. Page # 1 is correctly loaded except the menu # 1 is not displayed anymore.
   

Related code:

Sample application on GitHub:
https://github.com/iamkinetic/ionic4-multiple-menus-bug

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (C:\Users\iamkinetic\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.7.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

Utility:

   cordova-res : not installed
   native-run  : 0.2.7

System:

   NodeJS : v11.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.10.2
   OS     : Windows 10

[iamkinetic]

Does anyone knows of any work around for this bug?

[iamkinetic]

I believe #18683 may be related to this issue.

[iamkinetic]

@liamdebeasi Do you think you could take a look at this problem? I've tried fixing the problem for two weeks and this is the only thing preventing me from releasing a new version of our application.

If i need to rethink my navigation I will, but i'd like to be sure this is what causing my problem.

Thanks.

[iamkinetic]

Bug still present with @ionic/angular 4.8.0 + angular 8.2.3.

[iamkinetic]

This is my current "workaround" (it's far from perfect):
In my CanActive's guard, I've add some code to enable and make the menu works "correctly". I need to manually activate the menu to make it visible (even though it should already be visible) and then I need to add "menu-pane-visible" to the menu's classes. All of this in a setTimeout.

 setTimeout(async () => {
            await this.menuController.enable(true, 'my-menu');
            const menu = await this.menuController.get('my-menu');
            if (!menu.className.includes('menu-pane-visible')) {
              menu.className = menu.className + ' menu-pane-visible';
            }
          }, 200);

[liamdebeasi]

Sorry for the delay in response. Which version of Ionic did this issue start happening with?

[iamkinetic]

I've been porting my application from Ionic 3 to Ionic 4 since last may (only a few hours a month at first), so I've went through a few differents versions (from 4.1 to 4.9). The ported application wasn't really usable before mid-july and I was using Ionic 4.6 back then. I've just tried that version and the menu's bug was already present.

So I guess I can't really say for sure when the issue start happening.

[iamkinetic]

Oh and I never have more than one menu visible at once and I also have that issue when testing in a browser or with cordova (ios and android).

[liamdebeasi]

Ok thanks for the additional information. Sounds like this could be related to https://github.com/ionic-team/ionic/issues/18683 as you suggested previously.

[iamkinetic]

I don't know about that, I've tried with and without Ion-Split-Pane and the menu didn't behave correctly either way. The wrong classes are injected to the menu component when navigating back and forth between my two pages more than twice. It's like it's trying to hide the menu from the previous page, bug it's really hiding the menu from the current page.

[liamdebeasi]

Ok thanks for the additional info. Let me dig into this a bit and see what I can find.

[liamdebeasi]

Related issue: https://github.com/ionic-team/ionic/issues/19280

[iamkinetic]

@liamdebeasi Any news about this?

[iamkinetic]

Still broken with 4.10...

[proemke]

Still broken @ 4.11

My work around: (hope it's a temp fix....)

ionViewWillEnter() {
    const menuid = 'agenda-menu';
    this.menuController.enable(true, menuid);
    this.menuController.get(menuid).then(
      (thisMenu) => {
        if (!thisMenu.className.includes('menu-pane-visible')) {
          thisMenu.className = `${thisMenu.className} menu-pane-visible`;
        }
    });
  }

Using tabs as a base, every tab has it's own menu.

[iamkinetic]

Yeah, that's basically my workaround. It works ok on a phone, but not so much on a tablet unfortunately.

[proemke]

Still searching for a solution...
Setting the style 'menu-pane-visible' gives the same result as @iamkinetic, visible has to be set directly in the component, when a second menu is loaded all others reset to 0.

[proemke]

Found en Fixed ... Later today I'll create a pull request.

[iamkinetic]

Do you have a fork somewhere with that fix? I could help with testing.

[proemke]

@iamkinetic Check the pull-request :wink:

[iamkinetic]

@proemke What would be the correct way for me to test your change in my repo? Can I install @ionic/core from your PR? How?

[liamdebeasi]

I created a dev build for the PR:

npm i @ionic/[email protected]

I'll take a look at the PR soon 🙂

[iamkinetic]

@liamdebeasi @proemke The fix is indeed working correctly, but only if i manually enable the menu when entering the pages:

  ionViewWillEnter() {
    const menuid = 'my-second-menu';
    this.menuController.enable(true, menuid);
  }

I wouldn't expect to have to manually enable a menu that I didn't disable to begin with, but I'll gladly work with this work around! Nice work @proemke !

[iamkinetic]

Still not fixed in 4.14 or 5.0 beta 2 even though this really simple pull request that fix the problem has been waiting for now two months.

[iamkinetic]

Why is this bug still marked as "triage" when there's a pull request waiting for it?

[brandyscarney]

Please see my comment here: https://github.com/ionic-team/ionic/pull/19721#issuecomment-572777347

Thank you!

[liamdebeasi]

I investigated this issue a bit more and have determined that the root cause of this issue is in the router integration in Ionic Angular, not the menu or split pane.

Starting on the first page with menu A and then navigating to the second page with menu B causes menu A to be disabled; however, navigating back to the first page with menu A does not re-enable the menu. This is why the reported bug is happening.

The workaround @brandyscarney suggested in https://github.com/ionic-team/ionic/pull/19721#issuecomment-572777347 works because upon navigating to the second page, the first page and its menu are completely removed from the DOM. Upon navigating back to the first page, the first page and its menu are added back to the DOM as a new instance of that component. This results in menu A being enabled by default.

I do not think we should merge https://github.com/ionic-team/ionic/pull/19721 as it does not address the root issue. I will investigate more into how we can properly resolve this issue. For now I recommend that you use the workaround Brandy presented.

Thanks!

[iamkinetic]

@liamdebeasi The workaround seems to be working fine on both the bug repo and my real application repo when testing in browser. I'll test it on a real device tomorrow, but I'm confident it will work correctly.

Thanks for the help to both of you.

Should we keep this issue open until you guys find the root cause of the issue?

[brandyscarney]

@iamkinetic Yes please keep this open! We'll have to investigate a solution within the router. Let us know how the workaround works, hopefully it doesn't have any negative side effects.

[iamkinetic]

@brandyscarney @liamdebeasi The workaround is working fine in both iOS and Android devices. There is still some display issues with the menu when testing in Safari, but I don't really care because the bug I had was in a mobile application.