fix(angular): menu button is enabled with Angular Universal builds #27814
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
liamdebeasi
reviewed
Jul 17, 2023
averyjohnston
approved these changes
Jul 18, 2023
2 tasks
liamdebeasi
added a commit
that referenced
this pull request
Oct 10, 2023
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: Resolves #27524 #22206
What is the current behavior?
After destructive hydration from an Angular Universal build, the
ion-menuis disabled. This results in a few problematic behaviors:ion-split-pane, the split pane will not render with the menu.ion-menu-button, the menu icon will not render and the menu will not be accessible.What is the new behavior?
ion-menuwhen in a server environment.ion-menuthat 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?
Other information
Dev-build:
7.1.4-dev.11689625795.1d16532b