From 5b165067e8f12587db4fa15f30069651164c3e4e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:25:34 +0100
Subject: [PATCH] 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.

(cherry picked from commit a028b5d8421f1e0094381f30c37f8ec3c02e2c46)
---
 src/material/tabs/ink-bar.ts                  |  1 +
 .../tabs/tab-nav-bar/tab-nav-bar.spec.ts      | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/material/tabs/ink-bar.ts b/src/material/tabs/ink-bar.ts
index 77da049c500d..d742222b98f9 100644
--- a/src/material/tabs/ink-bar.ts
+++ b/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. */
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index 8addcbd7302c..ce75ae3ed058 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/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>;