javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu) menus on the same side are not automatically disabled (#28269)

Browse Source 
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:
a04a11be35/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:
a04a11be35/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
https://github.com/ionic-team/ionic-framework/pull/27814. The menu is
never automatically disabled, so the bug does not happen.

This is a partial fix for
https://github.com/ionic-team/ionic-framework/issues/18683. Properly
fixing this requires another change which is out of scope for this work.
This commit is contained in:
Liam DeBeasi
2023-10-10 12:13:28 -04:00
committed by GitHub
parent 8601977aa7
commit 4f43d5ce08
5 changed files with 191 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
core/src/utils/menu-controller/index.ts
View File

@ -1,3 +1,5 @@
import { printIonWarning } from '@utils/logging';
import type { MenuI } from '../../components/menu/menu-interface';
import type { AnimationBuilder, BackButtonEvent } from '../../interface';
import { MENU_BACK_BUTTON_PRIORITY } from '../hardware-back-button';
@ -12,7 +14,7 @@ const createMenuController = () => {
const menus: MenuI[] = [];
const open = async (menu?: string | null): Promise<boolean> => {
const menuEl = await get(menu);
const menuEl = await get(menu, true);
if (menuEl) {
return menuEl.open();
}
@ -20,7 +22,7 @@ const createMenuController = () => {
};
const close = async (menu?: string | null): Promise<boolean> => {
const menuEl = await (menu !== undefined ? get(menu) : getOpen());
const menuEl = await (menu !== undefined ? get(menu, true) : getOpen());
if (menuEl !== undefined) {
return menuEl.close();
}
@ -28,7 +30,7 @@ const createMenuController = () => {
};
const toggle = async (menu?: string | null): Promise<boolean> => {
const menuEl = await get(menu);
const menuEl = await get(menu, true);
if (menuEl) {
return menuEl.toggle();
}
@ -70,20 +72,48 @@ const createMenuController = () => {
return false;
};
const get = async (menu?: string | null): Promise<HTMLIonMenuElement | undefined> => {
/**
* Finds and returns the menu specified by "menu" if registered.
* @param menu - The side or ID of the desired menu
* @param logOnMultipleSideMenus - If true, this function will log a warning
* if "menu" is a side but multiple menus on the same side were found. Since this function
* is used in multiple places, we default this log to false so that the calling
* functions can choose whether or not it is appropriate to log this warning.
*/
const get = async (
menu?: string | null,
logOnMultipleSideMenus: boolean = false
): Promise<HTMLIonMenuElement | undefined> => {
await waitUntilReady();
if (menu === 'start' || menu === 'end') {
// there could be more than one menu on the same side
// so first try to get the enabled one
const menuRef = find((m) => m.side === menu && !m.disabled);
if (menuRef) {
return menuRef;
const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
if (menuRefs.length >= 1) {
if (menuRefs.length > 1 && logOnMultipleSideMenus) {
printIonWarning(
`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.`,
menuRefs.map((m) => m.el)
);
}
return menuRefs[0].el;
}
// didn't find a menu side that is enabled
// so try to get the first menu side found
return find((m) => m.side === menu);
const sideMenuRefs = menus.filter((m) => m.side === menu);
if (sideMenuRefs.length >= 1) {
if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
printIonWarning(
`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.`,
sideMenuRefs.map((m) => m.el)
);
}
return sideMenuRefs[0].el;
}
} else if (menu != null) {
// the menuId was not left or right
// so try to get the menu by its "id"
@ -131,9 +161,6 @@ const createMenuController = () => {
const _register = (menu: MenuI) => {
if (menus.indexOf(menu) < 0) {
if (!menu.disabled) {
_setActiveMenu(menu);
}
menus.push(menu);
}
};
@ -145,14 +172,6 @@ const createMenuController = () => {
}
};
const _setActiveMenu = (menu: MenuI) => {
// if this menu should be enabled
// then find all the other menus on this same side
// and automatically disable other same side menus
const side = menu.side;
menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
};
const _setOpen = async (menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean> => {
if (isAnimatingSync()) {
return false;
@ -238,7 +257,6 @@ const createMenuController = () => {
_register,
_unregister,
_setOpen,
_setActiveMenu,
};
};