fix(tabs, tab-bar): use standalone tab bar in Vue - #29925
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
BenOsodrac
approved these changes
Oct 8, 2024
|
Do this also fix react version? |
Contributor
Author
|
Hello @manhtruongwang! This PR only addresses the issue for Vue. A separate PR will be created for React. |
thetaPC
changed the title
tanner-reits
approved these changes
Oct 9, 2024
tanner-reits
left a comment
tanner-reits
left a comment
Contributor
There was a problem hiding this comment.
LGTM, confirmed it fixes the issue repro
thetaPC
changed the title
thetaPC
changed the title
tanner-reits
approved these changes
Oct 11, 2024
tanner-reits
left a comment
tanner-reits
left a comment
Contributor
There was a problem hiding this comment.
Don't have a lot of Vue experience, but provide/inject seems like a good approach. Confirmed this fixes the standalone reproduction and that the router outlet approach still works as well. Nice work 👍
2 tasks
github-merge-queue Bot
pushed a commit
that referenced
this pull request
Oct 16, 2024
Issue number: resolves #29885, resolves #29924 --------- <!-- 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. --> React and Vue: Tab bar could be a standalone element within `IonTabs` and would navigate without issues with a router outlet before v8.3: ```tsx <IonTabs> <IonRouterOutlet></IonRouterOutlet> <IonTabBar></IonTabBar> </IonTabs> ``` It would work as if it was written as: ```tsx <IonTabs> <IonRouterOutlet></IonRouterOutlet> <IonTabBar slot="bottom"> <!-- Buttons --> </IonTabBar> </IonTabs> ``` After v8.3, any `ion-tab-bar` that was not a direct child of `ion-tabs` would lose it's expected behavior when used with a router outlet. If a user clicked on a tab button, then the content would not be redirected to that expected view. React only: Users can no longer add a `ref` to the `IonRouterOutlet`, it always returns undefined. ``` <IonTabs> <IonRouterOutlet ref={ref}> <IonTabBar slot="bottom"> <!-- Buttons --> </IonTabBar> </IonTabs> ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> The fixes were already reviewed through PR #29925 and PR #29927. I split them to make it easier to review. React and Vue: The React tabs has been updated to pass data to the tab bar through context instead of passing it through a ref. By using a context, the data will be available for the tab bar to use regardless of its level. React only: Reverted the logic for `routerOutletRef` and added a comment of the importance of it. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> N/A
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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 part of #29885
What is the current behavior?
Vue: Tab bar could be a standalone element within
ion-tabsand would navigate without issues with a router outlet before v8.3:It would work as if it was written as:
After v8.3, any
ion-tab-barthat was not a direct child ofion-tabswould lose it's expected behavior when used with a router outlet. If a user clicked on a tab button, then the content would not be redirected to that expected view.What is the new behavior?
The Vue tab bar's
_hasRouterOutletprop has been modified to accept both Boolean andundefinedvalues. When the value isundefined, it indicates that theion-tab-barcomponent was not found within the slotted content ofion-tabs. This typically occurs when the tab bar is not passed as a direct child ofion-tabs.In such cases, the tab bar will perform its own check to determine if an
ion-router-outletis present. This check cannot be handled bytabs, as it would need to wait until after mounting to access the DOM, which would be too late since the tab bar would have already executed the logic that depends on_hasRouterOutlet.Does this introduce a breaking change?
Other information
Dev build:
8.3.3-dev.11728341918.1d3d4b3fHow to test:
8.3.0-standalonenpm install @ionic/vue@8.3.3-dev.11728341918.1d3d4b3f