Repository navigation
bug: SelectedTab on ion-tab-bar does not activate selected tab as default #20060
Description
Bug Report
Ionic version:
[x] 4.x
Current behavior:
Preferred tab as per property selectedTab when opening tabs is not selected
Expected behavior:
Preferred tab as per property selectedTab when opening tabs is selected (as per documentation).
Steps to reproduce:
Take sample code as per https://github.com/ionic-team/ionic-docs/tree/master/src/demos/api/tabs/index.html and put in a separate file with extension html.
Replace code <ion-tab-bar slot="bottom"> with <ion-tab-bar slot="bottom" selectedTab="movies">
Open file in Chrome. Tab movies is not selected.
Related code:
See above
Other information:
Plain javascript file, no framework used. Same issue seems to appear when trying to set selected="true" on ion-tab-button.
Related issue reported https://stackoverflow.com/questions/53860450/ionic-4-preselect-a-tab-in-a-modal. Using selected-tab as property does not work. Using JS is not desired (through controller).
Ionic info:
[WARN] You are not in an Ionic project directory. Project context may be missing.
Ionic:
Ionic CLI : 5.4.5
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v12.13.0
npm : 6.12.0
OS : Windows 10
Activity
[-]bug: [/-][+]bug: SelectedTab on ion-tab-bar does not activate selected tab as default[/+]Tommertom commentedon Dec 13, 2019
Looking at the tsx code in ion-tabs
componentWillLoad(): if no router is used, it defaults to tab 0, which then requires a present action to change it. This gives an ugly UI as tab 0 is always shown, irrespective of selectedTab in ion-tab-bar. So programmatically throughpresentI have to do a switch given the intended route..https://github.com/ionic-team/ionic/blob/master/core/src/components/tabs/tabs.tsx
Line 50:
await this.select(tabs[0]);componentWillRender()interestingly takes the selectedTab property from the ion-tab-bar and sets the internal property, but not invokingthis.select(....)to assure that tab is actually really selected in the view.See svelte example with dirty workaround in https://github.com/Tommertom/svelte-ionic-tab-routing-spa
It would be very nice if a
selectedTabproperty on ion-tabs or ion-tab-bar can be defined (and working) from the start making it possible to use it in JS, svelte and maybe other frameworks.Alternatively you could offer three options in useRouter:
yes, no, defaultso the developer can choose the startup behaviour (optionnonow is overridden if there is no ion-router present.averyrousseau commentedon Feb 28, 2022
Thanks for the issue! I can confirm that this is still an issue in the latest version of Ionic. I was able to replicate it in core (i.e. no framework). Thanks for the added dive into the potential cause; there might be a conflict between the code you mentioned in
tabsand thecomponentWillLoadoftab-bar(which looks like it's supposed to set upselectedTab, alongside the@Watch).Tommertom commentedon Jun 20, 2022
Hi - any update on this? @amandaejohnston
Maybe you can point out how it is done in the Angular/Vue/React package of Ionic - so I can try to do this for svelte? In the source code? Happy to look it up