javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): adding non tab button elements inside ion-tab-bar no longer causes errors (#22643)

Browse Source 
resolves #22642
This commit is contained in:
Liam DeBeasi
2020-12-08 12:49:13 -05:00
committed by GitHub
parent 8d5ed47a28
commit 61cf0c534e
2 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vue/src/components/IonTabBar.ts
View File

@ -24,6 +24,7 @@ export const IonTabBar = defineComponent({
tabs: {}
};
const currentInstance = getCurrentInstance();
const isTabButton = (child: any) => child.type?.name === 'IonTabButton';
/**
* For each tab, we need to keep track of its
* base href as well as any child page that
@ -33,7 +34,7 @@ export const IonTabBar = defineComponent({
*/
const children = (currentInstance.subTree.children || []) as VNode[];
children.forEach((child: VNode) => {
if (child.type && (child.type as any).name === 'IonTabButton') {
if (isTabButton(child)) {
tabState.tabs[child.props.tab] = {
originalHref: child.props.href,
currentHref: child.props.href,
@ -65,7 +66,7 @@ export const IonTabBar = defineComponent({
* it in the tabs state.
*/
childNodes.forEach((child: VNode) => {
if (child.type && (child.type as any).name === 'IonTabButton') {
if (isTabButton(child)) {
const tab = tabs[child.props.tab];
if (!tab || (tab.originalHref !== child.props.href)) {
@ -106,7 +107,7 @@ export const IonTabBar = defineComponent({
}
}
const activeChild = childNodes.find((child: VNode) => child.props.tab === activeTab);
const activeChild = childNodes.find((child: VNode) => isTabButton(child) && child.props?.tab === activeTab);
const tabBar = this.$refs.ionTabBar;
const tabDidChange = activeTab !== prevActiveTab;
if (activeChild && tabBar) {

34
packages/vue/test-app/tests/unit/tab-bar.spec.ts
View File

@ -102,4 +102,38 @@ describe('ion-tab-bar', () => {
const innerHTML = wrapper.find('ion-tabs').html();
expect(innerHTML).toContain(`<div class="tabs-inner" style="position: relative; flex: 1; contain: layout size style;"><ion-router-outlet tabs="true"></ion-router-outlet></div><ion-tab-bar></ion-tab-bar></ion-tabs>`)
});
// Verifies the fix for https://github.com/ionic-team/ionic-framework/issues/22642
it('should not fail on non tab button elements', async () => {
const Tabs = {
components: { IonPage, IonTabs, IonTabBar },
template: `
<ion-page>
<ion-tabs>
<ion-tab-bar>
<!-- my comment -->
</ion-tab-bar>
</ion-tabs>
</ion-page>
`,
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/', component: Tabs }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(App, {
global: {
plugins: [router, IonicVue]
}
});
const innerHTML = wrapper.find('ion-tabs').html();
expect(innerHTML).toContain(`><ion-tab-bar><!-- my comment --></ion-tab-bar>`)
})
});