bug: unable to control IonMenu programmatically using MenuController

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

When I try to programmatically toggle ion-menu using await menuController.toggle(menuId), menu does not open.

Expected Behavior

In previous versions of Ionic (5.9.3) calling toggle on menuController opened the menu correctly - see my other branch https://github.com/nika1001/ionic6-menu-controller-issue/tree/ionic5-working-menu I would like to have the same behavior also in Ionic6.

Steps to Reproduce

1. Start an application provided in the github: https://github.com/nika1001/ionic6-menu-controller-issue
2. Pressing buttons under “Toggle menu by MenuController” header does nothing

Code Reproduction URL

https://github.com/nika1001/ionic6-menu-controller-issue

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Tools\nvm\v16.10.0\node_modules@ionic\cli) Ionic Framework : @ionic/react 6.0.1

Capacitor:

Capacitor CLI : 3.3.3 @capacitor/android : not installed @capacitor/core : 3.3.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v16.10.0 (C:\Program Files\nodejs\node.exe) npm : 8.0.0 OS : Windows 10

Additional Information

Reason for using menuController is that I need multiple menus on the same side and in order to do that I had to first enable a menu to be toggled:

const toggleMenu = async (menuId: string) => {
  await menuController.enable(true, menuId)
  await menuController.toggle(menuId)
}

Inspired by: https://forum.ionicframework.com/t/allow-multiple-menus/189934/4

If I don’t enable the menu, I can toggle only 1 of the menus assigned to “start” side. This is demonstrated by buttons under “Toggle menu directly” header in my demo application: https://github.com/nika1001/ionic6-menu-controller-issue

[sean-perkins]

Thanks for reporting this! While the behavior of only having one enabled menu at a time is a known limitation to how we currently approach multiple menus, the behavior for toggling the enabled state and displaying the menu does appear to have regressed from v5 to v6.

We’ll track this bug and share an update when we are able. Thanks!

[sean-perkins]

@mlegenhausen thanks for the work on this issue. I have confirmed:

1. @ionic/core is being bundled because of the componentOnReady import.
2. The import for menuController must come from @ionic/core/components.

I’ll open a PR to get this resolved and add you as a co-contributor for the assistance.