From 2cf1a0bcae7d766aa25951c53470876f9569906c Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 18 Jul 2023 11:50:11 -0400
Subject: [PATCH] fix(angular): menu button is enabled with Angular Universal
 builds (#27814)

Issue number: Resolves #27524 #22206

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

After destructive hydration from an Angular Universal build, the
`ion-menu` is disabled. This results in a few problematic behaviors:
- If used with an `ion-split-pane`, the split pane will not render with
the menu.
- If used with an `ion-menu-button`, the menu icon will not render and
the menu will not be accessible.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes automatically disabling the `ion-menu` when in a server
environment.
- Prevents setting an `ion-menu` that no longer exists in the DOM, as an
active menu. This allows the most recent menu to be enabled when
rendered from Angular Universal builds.

Loom recording overviewing the change:
https://www.loom.com/share/5a149218adc84cc2af435fc1b1f45124?sid=249028f4-be3d-4d4a-948a-597da83be95a

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.1.4-dev.11689625795.1d16532b`
---
 core/src/components/menu/menu.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 56c6e3a919..c010e72d2d 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -1,6 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
+import { doc } from '@utils/browser';
 import { GESTURE_CONTROLLER } from '@utils/gesture';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
@@ -189,7 +190,6 @@ export class Menu implements ComponentInterface, MenuI {
     }
 
     if (!Build.isBrowser) {
-      this.disabled = true;
       return;
     }
 
@@ -705,9 +705,18 @@ export class Menu implements ComponentInterface, MenuI {
       this.forceClosing();
     }
 
-    if (!this.disabled) {
-      menuController._setActiveMenu(this);
+    if (doc?.contains(this.el)) {
+      /**
+       * Only set the active menu if the menu element is
+       * present in the DOM. Otherwise if it was destructively
+       * re-hydrated (through Angular Universal), then ignore
+       * setting the removed node as the active menu.
+       */
+      if (!this.disabled) {
+        menuController._setActiveMenu(this);
+      }
     }
+
     assert(!this.isAnimating, 'can not be animating');
   }