Skip to content

Commit 5b16506

Browse files
committed
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 a028b5d)
1 parent 1d3905a commit 5b16506

File tree

2 files changed

+23
-0
lines changed

2 files changed

+23
-0
lines changed

src/material/tabs/ink-bar.ts

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export class MatInkBar {
4848
/** Hides the ink bar. */
4949
hide() {
5050
this._items.forEach(item => item.deactivateInkBar());
51+
this._currentItem = undefined;
5152
}
5253

5354
/** Aligns the ink bar to a DOM node. */

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

+22
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,28 @@ describe('MatTabNavBar', () => {
357357
expect(tabLinks[1].classList.contains('mdc-tab--active')).toBe(true);
358358
});
359359

360+
it('should re-show the ink bar if the same tab is cleared and re-activated', fakeAsync(() => {
361+
const getInkBars = () =>
362+
fixture.nativeElement.querySelectorAll('.mdc-tab-indicator--active').length;
363+
const fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
364+
fixture.componentInstance.activeIndex = 0;
365+
fixture.detectChanges();
366+
tick(20);
367+
expect(getInkBars()).toBe(1);
368+
369+
fixture.componentInstance.activeIndex = -1;
370+
fixture.changeDetectorRef.markForCheck();
371+
fixture.detectChanges();
372+
tick(20);
373+
expect(getInkBars()).toBe(0);
374+
375+
fixture.componentInstance.activeIndex = 0;
376+
fixture.changeDetectorRef.markForCheck();
377+
fixture.detectChanges();
378+
tick(20);
379+
expect(getInkBars()).toBe(1);
380+
}));
381+
360382
describe('ripples', () => {
361383
let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
362384

0 commit comments

Comments
 (0)