Skip to content

Commit 4f43d5c

Browse files
liamdebeasiliamdebeasi
authored
fix(menu) menus on the same side are not automatically disabled (#28269)
Issue number: resolves #18974 --------- <!-- 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. --> When multiple menus on the same `side` are registered, all but the most recent menu are disabled. For example, if a user starts on PageA with a `start` menu and then navigates to PageB which also has a `start` menu, then the menu on PageA will be disabled. The problem is that if users navigates back to PageA they will be unable to open the menu on that view because it is still disabled. This behavior impacts any Ionic developer trying to open a menu whether by calling the `open` method on the menu itself or on the `menuController`. After discussing with the team, we believe the original intent of this behavior was to prevent users from accidentally opening the wrong menu when calling `menuController.open('start')`. This API allows developers to reference a menu by side, and since it's possible to have multiple menus on the same side it's also possible to open the wrong menu when referencing by side only. However, this API starts to break down pretty quickly in a navigation scenario. Sample Repo: https://github.com/liamdebeasi/multiple-menu-bug-repro ## Scenario 1: Referencing Menu by Side 1. On the "home" route click "Open 'start' menu". Observe that the home page menu opens. 2. Close the menu and click "Go to Page Two". 3. On the "page-two" route click "Open 'start' menu". Observe that the page two menu opens. 4. Go back to "home". 5. Click "Open 'start' menu". Observe that nothing happens. 6. Click "Enable and Open 'start'" Menu". Observe that the home menu opens. ## Scenario 2: Referencing Menu by ID 1. On the "home" route click "Open '#menu1' menu". Observe that the home page menu opens. 2. Close the menu and click "Go to Page Two". 3. On the "page-two" route click "Open '#menu2' menu". Observe that the page two menu opens. 4. Go back to "home". 5. Click "Open '#menu1' menu". Observe that nothing happens. 6. Click "Enable and Open '#menu1'" Menu". Observe that the home menu opens. ## Scenario 3: Using 3 or more menus even when enabling menus 1. On the "home" route click "Open 'start' menu". Observe that the home page menu opens. 2. Close the menu and click "Go to Page Two". 3. On the "page-two" route click "Open 'start' menu". Observe that the page two menu opens. 4. Close the menu and click "Go to Page Three" 5. On the "page-three" route click "Open 'start' menu". Observe that the page three menu opens. 6. Go back to "page-two". 8. Click "Open 'start' menu". Observe that nothing happens. 9. Click "Enable and Open 'start' Menu". Observe that nothing happens. The menu controller attempts to find an enabled menu on the specified side: https://github.com/ionic-team/ionic-framework/blob/a04a11be3571faa99c751edc034462e94a977e95/core/src/utils/menu-controller/index.ts#L79C12-L79C12 Step 6 is where this breaks down. In this scenario, the menus on "home" and "page-two" are disabled. This leads menu controller to use its fallback which tries to get the first menu registered on the specified side: https://github.com/ionic-team/ionic-framework/blob/a04a11be3571faa99c751edc034462e94a977e95/core/src/utils/menu-controller/index.ts#L86 This means that the menu controller would attempt to open the "home" menu even though the user is on "page-two" (because the start menu on "home" was the first to be registered). ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Menus are no longer automatically disabled when a new menu on the same side is registered - Referencing menus by side when multiple menus with that side exist in the DOM will cause a warning to be logged This change has a couple implications: 1. Developers no longer need to manually enable a menu as noted in https://ionicframework.com/docs/api/menu#multiple-menus. Note that continuing to manually enable the menus will not cause any adverse side effects and will effectively be a no-op. 2. Developers using the menuController to open a menu based on "side" may end up having the wrong menu get opened. Example before to this change: 1. Start on PageA with a `start` menu. Calling `menuController.open('start')` opens the menu on PageA. 2. Go to PageB with a `start` menu. Calling `menuController.open('start')` opens the menu on PageB because the menu on PageA is disabled. Example after to this change: 1. Start on PageA with a `start` menu. Calling `menuController.open('start')` opens the menu on PageA. 2. Go to PageB with a `start` menu. Calling `menuController.open('start')` attempts to opens the menu on PageA because both menus are enabled. However, since PageA is hidden nothing will appear to happen. ## 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. --> I manually verified that removing the Angular Universal code does not regress the behavior fixed in #27814. The menu is never automatically disabled, so the bug does not happen. This is a partial fix for #18683. Properly fixing this requires another change which is out of scope for this work.
1 parent 8601977 commit 4f43d5c

File tree

5 files changed

+191
-34
lines changed

5 files changed

+191
-34
lines changed

‎core/src/components/menu/menu-interface.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export interface MenuControllerI {
3030
_setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean>;
3131
_register(menu: MenuI): void;
3232
_unregister(menu: MenuI): void;
33-
_setActiveMenu(menu: MenuI): void;
3433

3534
getMenus(): Promise<HTMLIonMenuElement[]>;
3635
getOpenSync(): HTMLIonMenuElement | undefined;

‎core/src/components/menu/menu.tsx

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { ComponentInterface, EventEmitter } from '@stencil/core';
22
import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
33
import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
4-
import { doc } from '@utils/browser';
54
import { GESTURE_CONTROLLER } from '@utils/gesture';
65
import type { Attributes } from '@utils/helpers';
76
import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
@@ -762,18 +761,6 @@ export class Menu implements ComponentInterface, MenuI {
762761
*/
763762
this.afterAnimation(false);
764763
}
765-
766-
if (doc?.contains(this.el)) {
767-
/**
768-
* Only set the active menu if the menu element is
769-
* present in the DOM. Otherwise if it was destructively
770-
* re-hydrated (through Angular Universal), then ignore
771-
* setting the removed node as the active menu.
772-
*/
773-
if (!this.disabled) {
774-
menuController._setActiveMenu(this);
775-
}
776-
}
777764
}
778765

779766
render() {

‎core/src/components/menu/test/multiple/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Menu - Multiple</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
<script type="module">
16+
import { menuController } from '../../../../dist/ionic/index.esm.js';
17+
window.menuController = menuController;
18+
</script>
19+
</head>
20+
21+
<body>
22+
<ion-app>
23+
<ion-menu side="start" menu-id="primary-menu" id="primary-menu" content-id="main">
24+
<ion-header>
25+
<ion-toolbar color="primary">
26+
<ion-title>Primary</ion-title>
27+
</ion-toolbar>
28+
</ion-header>
29+
<ion-content class="ion-padding"> Menu Content </ion-content>
30+
</ion-menu>
31+
32+
<ion-menu side="start" menu-id="secondary-menu" id="secondary-menu" content-id="main">
33+
<ion-header>
34+
<ion-toolbar color="secondary">
35+
<ion-title>Secondary</ion-title>
36+
</ion-toolbar>
37+
</ion-header>
38+
<ion-content class="ion-padding"> Menu Content </ion-content>
39+
</ion-menu>
40+
41+
<ion-menu disabled="true" side="end" menu-id="success-menu" id="success-menu" content-id="main">
42+
<ion-header>
43+
<ion-toolbar color="success">
44+
<ion-title>Success</ion-title>
45+
</ion-toolbar>
46+
</ion-header>
47+
<ion-content class="ion-padding"> Menu Content </ion-content>
48+
</ion-menu>
49+
50+
<ion-menu disabled="true" side="end" menu-id="danger-menu" id="danger-menu" content-id="main">
51+
<ion-header>
52+
<ion-toolbar color="danger">
53+
<ion-title>Danger</ion-title>
54+
</ion-toolbar>
55+
</ion-header>
56+
<ion-content class="ion-padding"> Menu Content </ion-content>
57+
</ion-menu>
58+
59+
<div class="ion-page" id="main">
60+
<ion-header>
61+
<ion-toolbar>
62+
<ion-buttons slot="start">
63+
<ion-menu-button menu="primary-menu" color="primary"></ion-menu-button>
64+
<ion-menu-button menu="secondary-menu" color="secondary"></ion-menu-button>
65+
</ion-buttons>
66+
<ion-title>Menu - Multiple</ion-title>
67+
</ion-toolbar>
68+
</ion-header>
69+
<ion-content class="ion-padding">Content</ion-content>
70+
</div>
71+
</ion-app>
72+
</body>
73+
<scrip
74+
</html>

‎core/src/components/menu/test/multiple/menu.e2e.ts

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* This behavior does not vary across modes/directions
6+
*/
7+
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
8+
test.describe(title('menu: multiple'), () => {
9+
test.beforeEach(async ({ page }, testInfo) => {
10+
testInfo.annotations.push({
11+
type: 'issue',
12+
description: 'https://github.com/ionic-team/ionic-framework/issues/18974',
13+
});
14+
15+
await page.goto(`/src/components/menu/test/multiple`, config);
16+
});
17+
18+
test('should present each menu on the same side individually', async ({ page }) => {
19+
const primaryMenu = page.locator('ion-menu#primary-menu');
20+
const secondaryMenu = page.locator('ion-menu#secondary-menu');
21+
22+
await primaryMenu.evaluate((el: HTMLIonMenuElement) => el.open());
23+
await expect(primaryMenu).toBeVisible();
24+
25+
await primaryMenu.evaluate((el: HTMLIonMenuElement) => el.close());
26+
await expect(primaryMenu).toBeHidden();
27+
28+
await secondaryMenu.evaluate((el: HTMLIonMenuElement) => el.open());
29+
await expect(secondaryMenu).toBeVisible();
30+
31+
await secondaryMenu.evaluate((el: HTMLIonMenuElement) => el.close());
32+
await expect(secondaryMenu).toBeHidden();
33+
});
34+
35+
test('should close first menu when showing another menu on same side', async ({ page }) => {
36+
const primaryMenu = page.locator('ion-menu#primary-menu');
37+
const secondaryMenu = page.locator('ion-menu#secondary-menu');
38+
39+
await primaryMenu.evaluate((el: HTMLIonMenuElement) => el.open());
40+
await expect(primaryMenu).toBeVisible();
41+
42+
await secondaryMenu.evaluate((el: HTMLIonMenuElement) => el.open());
43+
await expect(primaryMenu).toBeHidden();
44+
await expect(secondaryMenu).toBeVisible();
45+
});
46+
47+
test('passing side to the menuController when multiple menus have that side should result in a warning', async ({
48+
page,
49+
}) => {
50+
const logs: string[] = [];
51+
52+
page.on('console', (msg) => {
53+
if (msg.type() === 'warning') {
54+
logs.push(msg.text());
55+
}
56+
});
57+
58+
await page.evaluate(() => (window as any).menuController.open('start'));
59+
60+
expect(logs.length).toBe(1);
61+
});
62+
63+
test('passing side to the menuController when multiple disabled menus have that side should result in a warning', async ({
64+
page,
65+
}) => {
66+
const logs: string[] = [];
67+
68+
page.on('console', (msg) => {
69+
if (msg.type() === 'warning') {
70+
logs.push(msg.text());
71+
}
72+
});
73+
74+
await page.evaluate(() => (window as any).menuController.open('end'));
75+
76+
expect(logs.length).toBe(1);
77+
});
78+
});
79+
});

‎core/src/utils/menu-controller/index.ts

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { printIonWarning } from '@utils/logging';
2+
13
import type { MenuI } from '../../components/menu/menu-interface';
24
import type { AnimationBuilder, BackButtonEvent } from '../../interface';
35
import { MENU_BACK_BUTTON_PRIORITY } from '../hardware-back-button';
@@ -12,23 +14,23 @@ const createMenuController = () => {
1214
const menus: MenuI[] = [];
1315

1416
const open = async (menu?: string | null): Promise<boolean> => {
15-
const menuEl = await get(menu);
17+
const menuEl = await get(menu, true);
1618
if (menuEl) {
1719
return menuEl.open();
1820
}
1921
return false;
2022
};
2123

2224
const close = async (menu?: string | null): Promise<boolean> => {
23-
const menuEl = await (menu !== undefined ? get(menu) : getOpen());
25+
const menuEl = await (menu !== undefined ? get(menu, true) : getOpen());
2426
if (menuEl !== undefined) {
2527
return menuEl.close();
2628
}
2729
return false;
2830
};
2931

3032
const toggle = async (menu?: string | null): Promise<boolean> => {
31-
const menuEl = await get(menu);
33+
const menuEl = await get(menu, true);
3234
if (menuEl) {
3335
return menuEl.toggle();
3436
}
@@ -70,20 +72,48 @@ const createMenuController = () => {
7072
return false;
7173
};
7274

73-
const get = async (menu?: string | null): Promise<HTMLIonMenuElement | undefined> => {
75+
/**
76+
* Finds and returns the menu specified by "menu" if registered.
77+
* @param menu - The side or ID of the desired menu
78+
* @param logOnMultipleSideMenus - If true, this function will log a warning
79+
* if "menu" is a side but multiple menus on the same side were found. Since this function
80+
* is used in multiple places, we default this log to false so that the calling
81+
* functions can choose whether or not it is appropriate to log this warning.
82+
*/
83+
const get = async (
84+
menu?: string | null,
85+
logOnMultipleSideMenus: boolean = false
86+
): Promise<HTMLIonMenuElement | undefined> => {
7487
await waitUntilReady();
7588

7689
if (menu === 'start' || menu === 'end') {
7790
// there could be more than one menu on the same side
7891
// so first try to get the enabled one
79-
const menuRef = find((m) => m.side === menu && !m.disabled);
80-
if (menuRef) {
81-
return menuRef;
92+
const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
93+
if (menuRefs.length >= 1) {
94+
if (menuRefs.length > 1 && logOnMultipleSideMenus) {
95+
printIonWarning(
96+
`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`,
97+
menuRefs.map((m) => m.el)
98+
);
99+
}
100+
101+
return menuRefs[0].el;
82102
}
83103

84104
// didn't find a menu side that is enabled
85105
// so try to get the first menu side found
86-
return find((m) => m.side === menu);
106+
const sideMenuRefs = menus.filter((m) => m.side === menu);
107+
if (sideMenuRefs.length >= 1) {
108+
if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
109+
printIonWarning(
110+
`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`,
111+
sideMenuRefs.map((m) => m.el)
112+
);
113+
}
114+
115+
return sideMenuRefs[0].el;
116+
}
87117
} else if (menu != null) {
88118
// the menuId was not left or right
89119
// so try to get the menu by its "id"
@@ -131,9 +161,6 @@ const createMenuController = () => {
131161

132162
const _register = (menu: MenuI) => {
133163
if (menus.indexOf(menu) < 0) {
134-
if (!menu.disabled) {
135-
_setActiveMenu(menu);
136-
}
137164
menus.push(menu);
138165
}
139166
};
@@ -145,14 +172,6 @@ const createMenuController = () => {
145172
}
146173
};
147174

148-
const _setActiveMenu = (menu: MenuI) => {
149-
// if this menu should be enabled
150-
// then find all the other menus on this same side
151-
// and automatically disable other same side menus
152-
const side = menu.side;
153-
menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
154-
};
155-
156175
const _setOpen = async (menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean> => {
157176
if (isAnimatingSync()) {
158177
return false;
@@ -238,7 +257,6 @@ const createMenuController = () => {
238257
_register,
239258
_unregister,
240259
_setOpen,
241-
_setActiveMenu,
242260
};
243261
};
244262

0 commit comments

Comments
 (0)