bug: SelectedTab on ion-tab-bar does not activate selected tab as default

[Tommertom]

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

[Tommertom]

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 through present I 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 invoking this.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 selectedTab property 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, default so the developer can choose the startup behaviour (option no now is overridden if there is no ion-router present.

[averyjohnston]

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 tabs and the componentWillLoad of tab-bar (which looks like it's supposed to set up selectedTab, alongside the @Watch).

[Tommertom]

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