fix(material/tabs): update tab nav bar focused index on direct focus (#22584)

The tab nav bar allows navigation both through tabbing and keyboard events. This introduces a problem when the user tabs into it and then starts using the arrow keys, because the `ListKeyManager` state isn't up-to-date.

These changes add some logic to update the index when the tabs receives focus.

Fixes #22576.

(cherry picked from commit 40a3e16)

Author: crisbeto

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

@@ -211,6 +211,13 @@ describe('MDC-based MatTabNavBar', () => {
       expect(inkBar.hide).toHaveBeenCalled();
     });
 
+    it('should update the focusIndex when a tab receives focus directly', () => {
+      const thirdLink = fixture.debugElement.queryAll(By.css('a'))[2];
+      dispatchFakeEvent(thirdLink.nativeElement, 'focus');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.tabNavBar.focusIndex).toBe(2);
+    });
   });
 
   it('should hide the ink bar if no tabs are active on init', fakeAsync(() => {

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts

@@ -125,6 +125,7 @@ export class MatTabNav extends _MatTabNavBase implements AfterContentInit {
     '[attr.tabIndex]': 'tabIndex',
     '[class.mat-mdc-tab-disabled]': 'disabled',
     '[class.mdc-tab--active]': 'active',
+    '(focus)': '_handleFocus()'
   }
 })
 export class MatTabLink extends _MatTabLinkBase implements MatInkBarItem, OnInit, OnDestroy {

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

@@ -202,6 +202,13 @@ describe('MatTabNavBar', () => {
       expect(inkBar.hide).toHaveBeenCalled();
     });
 
+    it('should update the focusIndex when a tab receives focus directly', () => {
+      const thirdLink = fixture.debugElement.queryAll(By.css('a'))[2];
+      dispatchFakeEvent(thirdLink.nativeElement, 'focus');
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.tabNavBar.focusIndex).toBe(2);
+    });
   });
 
   it('should hide the ink bar if no tabs are active on init', fakeAsync(() => {

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

@@ -243,6 +243,12 @@ export class _MatTabLinkBase extends _MatTabLinkMixinBase implements AfterViewIn
     this._focusMonitor.stopMonitoring(this.elementRef);
   }
 
+  _handleFocus() {
+    // Since we allow navigation through tabbing in the nav bar, we
+    // have to update the focused index whenever the link receives focus.
+    this._tabNavBar.focusIndex = this._tabNavBar._items.toArray().indexOf(this);
+  }
+
   static ngAcceptInputType_active: BooleanInput;
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_disableRipple: BooleanInput;
@@ -264,6 +270,7 @@ export class _MatTabLinkBase extends _MatTabLinkMixinBase implements AfterViewIn
     '[attr.tabIndex]': 'tabIndex',
     '[class.mat-tab-disabled]': 'disabled',
     '[class.mat-tab-label-active]': 'active',
+    '(focus)': '_handleFocus()'
   }
 })
 export class MatTabLink extends _MatTabLinkBase implements OnDestroy {

tools/public_api_guard/material/tabs.d.ts

@@ -91,6 +91,7 @@ export declare class _MatTabLinkBase extends _MatTabLinkMixinBase implements Aft
     rippleConfig: RippleConfig & RippleGlobalOptions;
     get rippleDisabled(): boolean;
     constructor(_tabNavBar: _MatTabNavBase, elementRef: ElementRef, globalRippleOptions: RippleGlobalOptions | null, tabIndex: string, _focusMonitor: FocusMonitor, animationMode?: string);
+    _handleFocus(): void;
     focus(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;