mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
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`
This commit is contained in:
@ -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');
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user