fix(menu): menu registers itself before it's ready

core/src/components.d.ts

@@ -29,7 +29,6 @@ import {
   LoadingOptions,
   MenuChangeEventDetail,
   MenuControllerI,
-  MenuI,
   ModalOptions,
   Mode,
   NavComponent,
@@ -2439,12 +2438,7 @@ export namespace Components {
   }
 
   interface IonMenuController {
-    '_createAnimation': (type: string, menuCmp: MenuI) => Promise<Animation>;
     '_getInstance': () => Promise<MenuControllerI>;
-    '_register': (menu: MenuI) => void;
-    '_setActiveMenu': (menu: MenuI) => void;
-    '_setOpen': (menu: MenuI, shouldOpen: boolean, animated: boolean) => Promise<boolean>;
-    '_unregister': (menu: MenuI) => void;
     /**
     * Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu.
     */

core/src/components/menu-controller/menu-controller.ts

@@ -198,13 +198,20 @@ export class MenuController implements MenuControllerI {
   }
 
   @Method()
+  _getInstance(): Promise<MenuControllerI> {
+    return Promise.resolve(this);
+  }
+
   _register(menu: MenuI) {
-    if (this.menus.indexOf(menu) < 0) {
-      this.menus.push(menu);
+    const menus = this.menus;
+    if (menus.indexOf(menu) < 0) {
+      if (!menu.disabled) {
+        this._setActiveMenu(menu);
+      }
+      menus.push(menu);
     }
   }
 
-  @Method()
   _unregister(menu: MenuI) {
     const index = this.menus.indexOf(menu);
     if (index > -1) {
@@ -212,7 +219,6 @@ export class MenuController implements MenuControllerI {
     }
   }
 
-  @Method()
   _setActiveMenu(menu: MenuI) {
     // if this menu should be enabled
     // then find all the other menus on this same side
@@ -220,10 +226,9 @@ export class MenuController implements MenuControllerI {
     const side = menu.side;
     this.menus
       .filter(m => m.side === side && m !== menu)
-      .forEach(m => (m.disabled = true));
+      .forEach(m => m.disabled = true);
   }
 
-  @Method()
   async _setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean> {
     if (this.isAnimatingSync()) {
       return false;
@@ -237,12 +242,6 @@ export class MenuController implements MenuControllerI {
     return menu._setOpen(shouldOpen, animated);
   }
 
-  @Method()
-  _getInstance(): Promise<MenuControllerI> {
-    return Promise.resolve(this);
-  }
-
-  @Method()
   _createAnimation(type: string, menuCmp: MenuI): Promise<Animation> {
     const animationBuilder = this.menuAnimations.get(type);
     if (!animationBuilder) {

core/src/components/menu/menu.tsx

@@ -136,15 +136,10 @@ export class Menu implements ComponentInterface, MenuI {
 
     if (this.isServer) {
       this.disabled = true;
-    } else {
-      this.menuCtrl = await this.lazyMenuCtrl.componentOnReady().then(p => p._getInstance());
-    }
-  }
-
-  async componentDidLoad() {
-    if (this.isServer) {
       return;
     }
+
+    const menuCtrl = this.menuCtrl = await this.lazyMenuCtrl.componentOnReady().then(p => p._getInstance());
     const el = this.el;
     const parent = el.parentNode as any;
     const content = this.contentId !== undefined
@@ -166,17 +161,8 @@ export class Menu implements ComponentInterface, MenuI {
     this.typeChanged(this.type, undefined);
     this.sideChanged();
 
-    let isEnabled = !this.disabled;
-    if (isEnabled) {
-      const menus = await this.menuCtrl!.getMenus();
-      isEnabled = !menus.some((m: any) => {
-        return m.side === this.side && !m.disabled;
-      });
-    }
-
     // register this menu with the app's menu controller
-    this.menuCtrl!._register(this);
-    this.ionMenuChange.emit({ disabled: !isEnabled, open: this._isOpen });
+    menuCtrl!._register(this);
 
     this.gesture = (await import('../../utils/gesture/gesture')).createGesture({
       el: this.doc,
@@ -190,12 +176,13 @@ export class Menu implements ComponentInterface, MenuI {
       onMove: ev => this.onMove(ev),
       onEnd: ev => this.onEnd(ev),
     });
-
-    // mask it as enabled / disabled
-    this.disabled = !isEnabled;
     this.updateState();
   }
 
+  componentDidLoad() {
+    this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
+  }
+
   componentDidUnload() {
     this.blocker.destroy();
     this.menuCtrl!._unregister(this);

core/src/components/menu/test/basic/index.html

@@ -103,6 +103,13 @@
 
   <script>
     const menu = document.querySelector('ion-menu-controller');
+    start();
+
+    async function start() {
+      await menu.componentOnReady();
+      menu.open('start');
+    }
+
     function openStart() {
       console.log('Open start menu');
       menu.open('start');