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

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:

Open side menu from initial page and click "Page # 2 with menu # 2
Navigation works, and side menu # 2 is displayed.
Open side menu and click “Page # 1 with menu # 1”.
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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 41 (11 by maintainers)

Commits related to this issue

fix(menu) menus on the same side are not automatically disabled (#28269) Issue number: resolves #18974 --------- ... — committed to ionic-team/ionic-framework by liamdebeasi 9 months ago

Most upvoted comments

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28269, and a fix will be available in an upcoming release of Ionic Framework.

This introduces a new behavior for menu, so this will ship in a minor release of Ionic rather than a patch release.

Please feel free to continue testing the dev build, and let me know if you have questions.

liamdebeasi on Oct 10, 2023

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

liamdebeasi on Sep 5, 2019

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!

liamdebeasi on Jan 9, 2020

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

Thank you!

brandyscarney on Jan 9, 2020

I created a dev build for the PR:

npm i @ionic/angular@4.12.0-dev.201910221300.d9a4ac8

I’ll take a look at the PR soon 🙂

liamdebeasi on Oct 22, 2019

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

proemke on Oct 21, 2019