fix(tab): handling edge cases

Author: ShaneK

core/src/components/tab-bar/tab-bar.tsx

@@ -22,6 +22,7 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface';
 })
 export class TabBar implements ComponentInterface {
   private keyboardCtrl: KeyboardController | null = null;
+  private didLoad = false;
 
   @Element() el!: HTMLElement;
 
@@ -40,6 +41,12 @@ export class TabBar implements ComponentInterface {
   @Prop() selectedTab?: string;
   @Watch('selectedTab')
   selectedTabChanged() {
+    // Skip the initial watcher call that happens during component load
+    // We handle that in componentDidLoad to ensure children are ready
+    if (!this.didLoad) {
+      return;
+    }
+    
     if (this.selectedTab !== undefined) {
       this.ionTabBarChanged.emit({
         tab: this.selectedTab,
@@ -67,9 +74,17 @@ export class TabBar implements ComponentInterface {
 
   componentDidLoad() {
     this.ionTabBarLoaded.emit();
+    // Set the flag to indicate the component has loaded
+    // This allows the watcher to emit changes from this point forward
+    this.didLoad = true;
+    
     // Emit the initial selected tab after the component is fully loaded
     // This ensures all child components (ion-tab-button) are ready
-    this.selectedTabChanged();
+    if (this.selectedTab !== undefined) {
+      this.ionTabBarChanged.emit({
+        tab: this.selectedTab,
+      });
+    }
   }
 
   async connectedCallback() {

core/src/components/tab-button/tab-button.tsx

@@ -103,6 +103,13 @@ export class TabButton implements ComponentInterface, AnchorInterface {
     if (this.layout === undefined) {
       this.layout = config.get('tabButtonLayout', 'icon-top');
     }
+
+    // Check if this tab button should be initially selected based on parent tab-bar's selectedTab prop
+    // This handles the case where selected-tab is set via HTML attribute before events fire
+    const tabBar = this.el.parentElement as HTMLIonTabBarElement | null;
+    if (tabBar && tabBar.tagName === 'ION-TAB-BAR' && tabBar.selectedTab !== undefined) {
+      this.selected = this.tab === tabBar.selectedTab;
+    }
   }
 
   private selectTab(ev: Event | KeyboardEvent) {