bug: Two ion-menu in different tabs unable to working properly

[roman-rr]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I would like to use ion-menu in each tabs for different purposes.
However it is working with bugs. When you interact with one menu, then try to open other, application give some bugs.

Expected Behavior

Both menus works properly in different tabs

Steps to Reproduce

git clone https://github.com/roman-rr/ionic-menu-bug
cd ionic-menu-bug
npm i
ionic serve

1. Click menu button to open ion-menu 1
2. Close menu 1
3. Go to second tab page
4. Click menu button to open ion-menu 2
5. Close menu 3
6. Come back to first tab page and try to open ion-menu 1

Code Reproduction URL

https://github.com/roman-rr/ionic-menu-bug

Ionic Info

Ionic:
   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.8.5
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Utility:
   cordova-res (update available: 0.15.3) : 0.14.0
   native-run (update available: 1.5.0)   : 1.4.0

System:
   NodeJS : v14.17.6 (/usr/local/bin/node)
   npm    : 6.14.15
   OS     : macOS Monterey

Additional Information

[liamdebeasi]

Thanks! This looks to be related to #18974, so I am going to merge the two.

[roman-rr]

Thank you very much, it was not easy to find this issue so i created this one.

[liamdebeasi]

No worries, thanks for the report!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.