Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Oct 10, 2023

Conversation

liamdebeasi
Copy link
Contributor

@liamdebeasi liamdebeasi commented Oct 2, 2023

Issue number: resolves #18974


What is the current behavior?

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".
  7. Click "Open 'start' menu". Observe that nothing happens.
  8. 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:

return find((m) => m.side === menu);

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?

  • 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
  • No

Other information

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.

@github-actions github-actions bot added the package: core @ionic/core package label Oct 2, 2023
@liamdebeasi liamdebeasi changed the title Fw 278 fix(menu) menus on the same side are not automatically disabled Oct 3, 2023
@liamdebeasi liamdebeasi marked this pull request as ready for review October 5, 2023 16:15
@liamdebeasi liamdebeasi requested a review from a team October 5, 2023 16:15
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One minor thing but should help with preventing tests from being removed.

* This behavior does not vary across modes/directions
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('menu: multiple'), () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please include an annotation for the issue. Not sure if it can go on the describe level or it should be inside the beforeEach.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the reminder! Added in 5570448 and 90425eb

@liamdebeasi liamdebeasi requested a review from thetaPC October 5, 2023 22:04
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

core/src/utils/menu-controller/index.ts Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have the work tracked to update the docs in light of this change, particularly the Multiple Menus section?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the reminder! I meant to do this as part of my work, but I forgot. Here's the PR: ionic-team/ionic-docs#3186

@liamdebeasi liamdebeasi changed the base branch from main to feature-7.5 October 10, 2023 14:49
@liamdebeasi liamdebeasi merged commit 4f43d5c into feature-7.5 Oct 10, 2023
43 checks passed
@liamdebeasi liamdebeasi deleted the FW-278 branch October 10, 2023 16:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: menu stop working in an application that has two main page with each a side menu
3 participants