bug: unable to control IonMenu programmatically using MenuController

[nika1001]

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

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[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!

[ruiminxu]

Hey, I’m also having the same problem but with await menuController.close(). Is there a fix for the problem?

[nika1001]

@sean-perkins could you please provide us with some estimate about when the fix could be available? We would like to make a transition from v5 to v6 but this is a blocker for us.

[alejandroledesma]

@sean-perkins I'm in same situation that @nika1001. This issue is a blocker for us to transition v6. Thanks for reporting this!

[Cyral]

Also blocked on v6 upgrade due to this

[sean-perkins]

Hello all, at this time we do not have an update to share with the status of this bug. I understand the importance this bug may have to your application and would gladly welcome any further diagnosis or debugging that can help narrow the scope of the issue.

For example, if anyone could help narrow which version of Ionic regressed this behavior, that would help significantly in my ability to provide a resolution. If the issue is present in the official 6.0.0 release, stepping through the beta releases would be my recommendation.

In the interim, I'll discuss this issue with the team and the blocker it causes for v6 migrations.

Thanks all!

[Cyral]

@sean-perkins

I did some testing today using @nika1001's sample repo and it appears the issue was introduced in 6.0.0.beta-6. beta-5 works as expected.

Note that I got some cryptic errors on most beta versions that required installing @stencil/core@2.9.0 as a workaround, described here.

[mlegenhausen]

The problem is that there are two menuControllers one you import via @react/core and one which is used internally by (for me) the @ionic/react components. It seems that the bundling of ionic is currently broken. You can see this when you use the webpack bundle analyzer where you will see that ionic is included twice in your application. Once via @ionic/core/dist/esm-es5 and via @ionic/core/components where the latter one is used by @ionic/react. When you import the menuController from @ionic/core you import it from @ionic/core/dist/esm-es5/index-f4d45e1e.js and the @ionic/react IonMenu component imports it from @ionic/core/components/index5.js which results in completely isolated instances of the menuController.

I use @ionic/core@6.0.9 and @ionic/react@6.0.9.