Hello,
So I’m really liking the Ionic framework for our cross platform app development. It’s been working quite well so far, with everything on Vue being pretty straight forward to use.
I’ve run into a strange problem with the IonTabs component though. The tab remains selected after I make a call to router.back(). The weird thing is it doesn’t seem to be a css class issue. I’ve remove the tab-selected class from the buttons but it still stays selected, visually that is.
Sample code:
<style scoped>
ion-tab-button.tab-selected {
color: var(--ion-color-success) !important;
background: var(--ion-color-medium) !important;
}
</style>
<template>
<ion-page id="mobile-dashboard" ref="ionPage">
<ion-header>
<ion-toolbar>
<ion-buttons>
<ion-button @click="testClicked">
Test
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-tabs :refreshKey="refreshKeyTabPage" ref="ionTabsRef">
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom" ref="tabBar">
<ion-tab-button tab="badge" href="/mobile-app/dashboard/xxx">
<ion-icon :icon=caretUpCircleOutline />
<ion-label>Badge</ion-label>
</ion-tab-button>
<ion-tab-button tab="channels" href="/mobile-app/dashboard/xxx">
<ion-icon :icon=peopleCircleOutline />
<ion-label>Channels</ion-label>
</ion-tab-button>
<ion-tab-button tab="settings" href="/mobile-app/dashboard/xxx">
<ion-icon :icon=cogOutline />
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
<script setup lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet, IonHeader, IonToolbar, IonButtons, IonButton } from '@ionic/vue';
import { caretUpCircleOutline, peopleCircleOutline, cogOutline } from 'ionicons/icons';
</script>
<script lang="ts">
import { defineComponent, onBeforeMount, ref, toRaw } from 'vue'
import { CapacitorBinder } from '../capacitor'
import { App } from '@capacitor/app'
import { isPlatform } from '@ionic/vue'
import { useBackButton } from '@ionic/vue'
//import router from '@/router';
import { useRouter, useRoute} from 'vue-router';
const recursiveSearch = (obj : any, searchKey : any, results = Array<unknown>()) => {
const r = results;
Object.keys(obj).forEach(key => {
const value = obj[key];
if(key === searchKey && typeof value !== 'object'){
r.push(value);
}else if(typeof value === 'object'){
recursiveSearch(value, searchKey, r);
}
});
return r;
};
let ionTabsRef = ref();
let tabBar = ref();
let router = useRouter();
let route = useRoute();
const component = defineComponent({
async ionViewCanLeave() {
App.exitApp();
return false;
},
async beforeMount () {
console.log("--> onBeforeMount")
ionTabsRef = ref();
tabBar = ref();
router = useRouter();
route = useRoute();
useBackButton(Number.MAX_SAFE_INTEGER, () => {
console.log('Handler was called!');
router.back();
console.log("--> ", ionTabsRef.value.$el.getSelectedTab());
});
},
async mounted() {
const result = (await CapacitorBinder.requestPermissions(null))
console.log("--> Returned result:", result?.result);
// //tabs.value.$el.select(2);
// (this.$refs.tabBar as any).checkActiveTab();
// console.log("--> ", (this.$refs.tabBar as any).$el.selectedTab);
// console.log("--> ", tabs.value.$el.getSelectedTab());
},
data() {return {
refreshKeyTabPage: 0,
}},
methods : {
testClicked: () => {
console.log("--> Test clicked");
//router.push('/mobile-app/dashboard/settings');
// Go back using this hack, otherwise the tabs stay selected
//if (window.history.state.back != undefined && window.history.state.back != null){router.replace(window.history.state.back);}
//window.history.back();
//router.back();
//debugger;
},
},
});
export default component
</script>
As you can see from the screenshot below, the behaviour is not quite right… There is no blue included when debugging via Chrome, but it’s always present when debugging via Android. There is some other html element or class that’s being added that I’m unaware of.
