fix(material/tabs): update tab state when active tab is swapped out (#24164)

Fixes that when the selected tab is swapped out, we weren't marking the new tab as active and emitting the `selectedTabChange` event.

Fixes #24147.

Author: crisbeto

src/material-experimental/mdc-tabs/tab-group.spec.ts

@@ -588,6 +588,26 @@ describe('MDC-based MatTabGroup', () => {
 
       expect(fixture.componentInstance.handleSelection).not.toHaveBeenCalled();
     }));
+
+    it('should update the newly-selected tab if the previously-selected tab is replaced', fakeAsync(() => {
+      const component: MatTabGroup = fixture.debugElement.query(
+        By.css('mat-tab-group'),
+      )!.componentInstance;
+
+      spyOn(fixture.componentInstance, 'handleSelection');
+
+      fixture.componentInstance.tabs[fixture.componentInstance.selectedIndex] = {
+        label: 'New',
+        content: 'New',
+      };
+      fixture.detectChanges();
+      tick();
+
+      expect(component._tabs.get(1)?.isActive).toBe(true);
+      expect(fixture.componentInstance.handleSelection).toHaveBeenCalledWith(
+        jasmine.objectContaining({index: 1}),
+      );
+    }));
   });
 
   describe('async tabs', () => {

src/material/tabs/tab-group.spec.ts

@@ -586,6 +586,26 @@ describe('MatTabGroup', () => {
 
       expect(fixture.componentInstance.handleSelection).not.toHaveBeenCalled();
     }));
+
+    it('should update the newly-selected tab if the previously-selected tab is replaced', fakeAsync(() => {
+      const component: MatTabGroup = fixture.debugElement.query(
+        By.css('mat-tab-group'),
+      )!.componentInstance;
+
+      spyOn(fixture.componentInstance, 'handleSelection');
+
+      fixture.componentInstance.tabs[fixture.componentInstance.selectedIndex] = {
+        label: 'New',
+        content: 'New',
+      };
+      fixture.detectChanges();
+      tick();
+
+      expect(component._tabs.get(1)?.isActive).toBe(true);
+      expect(fixture.componentInstance.handleSelection).toHaveBeenCalledWith(
+        jasmine.objectContaining({index: 1}),
+      );
+    }));
   });
 
   describe('async tabs', () => {

src/material/tabs/tab-group.ts

@@ -305,16 +305,28 @@ export abstract class _MatTabGroupBase
       // explicit change that selects a different tab.
       if (indexToSelect === this._selectedIndex) {
         const tabs = this._tabs.toArray();
+        let selectedTab: MatTab | undefined;
 
         for (let i = 0; i < tabs.length; i++) {
           if (tabs[i].isActive) {
             // Assign both to the `_indexToSelect` and `_selectedIndex` so we don't fire a changed
             // event, otherwise the consumer may end up in an infinite loop in some edge cases like
             // adding a tab within the `selectedIndexChange` event.
             this._indexToSelect = this._selectedIndex = i;
+            selectedTab = tabs[i];
             break;
           }
         }
+
+        // If we haven't found an active tab and a tab exists at the selected index, it means
+        // that the active tab was swapped out. Since this won't be picked up by the rendering
+        // loop in `ngAfterContentChecked`, we need to sync it up manually.
+        if (!selectedTab && tabs[indexToSelect]) {
+          Promise.resolve().then(() => {
+            tabs[indexToSelect].isActive = true;
+            this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
+          });
+        }
       }
 
       this._changeDetectorRef.markForCheck();