ionic-framework: 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

Start an application provided in the github: https://github.com/nika1001/ionic6-menu-controller-issue
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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 19 (10 by maintainers)

Most upvoted comments

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 on Jan 5, 2022

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

@ionic/core is being bundled because of the componentOnReady import.
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.

sean-perkins on Mar 24, 2022

The double inclusion of ionic can be fixed by patching an import in @ionic/react. Here is my patch

diff --git a/dist/index.esm.js b/dist/index.esm.js
index 67907424a1602c7dfaf4414a6a1a5f68c8370970..74ddf6567428fe8a8251dd17c5f2b2a840d9443b 100644
--- a/dist/index.esm.js
+++ b/dist/index.esm.js
@@ -89,7 +89,7 @@ import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/compo
 import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-tab-bar.js';
 import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-tab-button.js';
 import { defineCustomElement as defineCustomElement$1b } from 'ionicons/components/ion-icon.js';
-import { componentOnReady } from '@ionic/core';
+import { componentOnReady } from '@ionic/core/components';
 
 const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
     onIonViewWillEnter: () => {

IMHO this needs to be fixed in the core package or the problem with importing different code when using @ionic/core or @ionic/core/components will persist.

mlegenhausen on Mar 24, 2022

I found a solution to the problem. By using @ionic/core/components instead of @ionic/core you use the same imports that @ionic/react is using so it will pick up the same menuController. I am still getting ionic included twice in my bundle, but I will investigate this further.

mlegenhausen on Mar 2, 2022