fix(material/tabs): ink bar not showing when same tab is re-selected (#…

…30121)

Fixes that if a tab is active, it gets cleared and the re-selected, the ink bar wasn't showing up.

Fixes #30036.

src/material/tabs/ink-bar.ts

@@ -48,6 +48,7 @@ export class MatInkBar {
   /** Hides the ink bar. */
   hide() {
     this._items.forEach(item => item.deactivateInkBar());
+    this._currentItem = undefined;
   }
 
   /** Aligns the ink bar to a DOM node. */

src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -357,6 +357,28 @@ describe('MatTabNavBar', () => {
     expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(true);
   });
 
+  it('should re-show the ink bar if the same tab is cleared and re-activated', fakeAsync(() => {
+    const getInkBars = () =>
+      fixture.nativeElement.querySelectorAll('.mdc-tab-indicator--active').length;
+    const fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+    fixture.componentInstance.activeIndex = 0;
+    fixture.detectChanges();
+    tick(20);
+    expect(getInkBars()).toBe(1);
+
+    fixture.componentInstance.activeIndex = -1;
+    fixture.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+    tick(20);
+    expect(getInkBars()).toBe(0);
+
+    fixture.componentInstance.activeIndex = 0;
+    fixture.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+    tick(20);
+    expect(getInkBars()).toBe(1);
+  }));
+
   describe('ripples', () => {
     let fixture: ComponentFixture<SimpleTabNavBarTestApp>;