-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
Conversation
There was a problem hiding this 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'), () => { |
There was a problem hiding this comment.
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
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
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 astart
menu and then navigates to PageB which also has astart
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 theopen
method on the menu itself or on themenuController
.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
Scenario 2: Referencing Menu by ID
Scenario 3: Using 3 or more menus even when enabling menus
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:
ionic-framework/core/src/utils/menu-controller/index.ts
Line 86 in a04a11b
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?
This change has a couple implications:
Example before to this change:
start
menu. CallingmenuController.open('start')
opens the menu on PageA.start
menu. CallingmenuController.open('start')
opens the menu on PageB because the menu on PageA is disabled.Example after to this change:
start
menu. CallingmenuController.open('start')
opens the menu on PageA.start
menu. CallingmenuController.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?
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.