fix(chips): unable to tab out of chip list with input on firefox (#15060)

Fixes user focus being wrapped back to the first chip, when trying to tab out of a chip list that has an input, on Firefox.

Fixes #15011.

Author: crisbeto

src/material/chips/chip-input.spec.ts

@@ -1,9 +1,9 @@
 import {Directionality} from '@angular/cdk/bidi';
-import {ENTER, COMMA} from '@angular/cdk/keycodes';
+import {ENTER, COMMA, TAB} from '@angular/cdk/keycodes';
 import {PlatformModule} from '@angular/cdk/platform';
-import {createKeyboardEvent} from '@angular/cdk/testing';
+import {createKeyboardEvent, dispatchKeyboardEvent, dispatchEvent} from '@angular/cdk/testing';
 import {Component, DebugElement, ViewChild} from '@angular/core';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -98,6 +98,42 @@ describe('MatChipInput', () => {
       expect(chipInputDirective.disabled).toBe(true);
     });
 
+    it('should allow focus to escape when tabbing forwards', fakeAsync(() => {
+      const listElement: HTMLElement = fixture.nativeElement.querySelector('.mat-chip-list');
+
+      expect(listElement.getAttribute('tabindex')).toBe('0');
+
+      dispatchKeyboardEvent(inputNativeElement, 'keydown', TAB);
+      fixture.detectChanges();
+
+      expect(listElement.getAttribute('tabindex'))
+        .toBe('-1', 'Expected tabIndex to be set to -1 temporarily.');
+
+      tick();
+      fixture.detectChanges();
+
+      expect(listElement.getAttribute('tabindex'))
+        .toBe('0', 'Expected tabIndex to be reset back to 0');
+    }));
+
+    it('should not allow focus to escape when tabbing backwards', fakeAsync(() => {
+      const listElement: HTMLElement = fixture.nativeElement.querySelector('.mat-chip-list');
+      const event = createKeyboardEvent('keydown', TAB);
+      Object.defineProperty(event, 'shiftKey', {get: () => true});
+
+      expect(listElement.getAttribute('tabindex')).toBe('0');
+
+      dispatchEvent(inputNativeElement, event);
+      fixture.detectChanges();
+
+      expect(listElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
+
+      tick();
+      fixture.detectChanges();
+
+      expect(listElement.getAttribute('tabindex')).toBe('0', 'Expected tabindex to remain 0');
+    }));
+
   });
 
   describe('[addOnBlur]', () => {
@@ -205,11 +241,12 @@ describe('MatChipInput', () => {
   template: `
     <mat-form-field>
       <mat-chip-list #chipList>
+        <mat-chip>Hello</mat-chip>
+        <input matInput [matChipInputFor]="chipList"
+                  [matChipInputAddOnBlur]="addOnBlur"
+                  (matChipInputTokenEnd)="add($event)"
+                  [placeholder]="placeholder" />
       </mat-chip-list>
-      <input matInput [matChipInputFor]="chipList"
-                [matChipInputAddOnBlur]="addOnBlur"
-                (matChipInputTokenEnd)="add($event)"
-                [placeholder]="placeholder" />
     </mat-form-field>
   `
 })

src/material/chips/chip-input.ts

@@ -8,7 +8,7 @@
 
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output} from '@angular/core';
-import {hasModifierKey} from '@angular/cdk/keycodes';
+import {hasModifierKey, TAB} from '@angular/cdk/keycodes';
 import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
 import {MatChipList} from './chip-list';
 import {MatChipTextControl} from './chip-text-control';
@@ -109,6 +109,12 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
 
   /** Utility method to make host definition/tests more clear. */
   _keydown(event?: KeyboardEvent) {
+    // Allow the user's focus to escape when they're tabbing forward. Note that we don't
+    // want to do this when going backwards, because focus should go back to the first chip.
+    if (event && event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
+      this._chipList._allowFocusEscape();
+    }
+
     this._emitChipEnd(event);
   }
 

src/material/chips/chip-list.ts

@@ -356,14 +356,8 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
         .subscribe(dir => this._keyManager.withHorizontalOrientation(dir));
     }
 
-    // Prevents the chip list from capturing focus and redirecting
-    // it back to the first chip when the user tabs out.
     this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
-      this._tabIndex = -1;
-      setTimeout(() => {
-        this._tabIndex = this._userTabIndex || 0;
-        this._changeDetectorRef.markForCheck();
-      });
+      this._allowFocusEscape();
     });
 
     // When the list changes, re-subscribe
@@ -685,6 +679,22 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
     this.stateChanges.next();
   }
 
+  /**
+   * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
+   * user to tab out of it. This prevents the list from capturing focus and redirecting
+   * it back to the first chip, creating a focus trap, if it user tries to tab away.
+   */
+  _allowFocusEscape() {
+    if (this._tabIndex !== -1) {
+      this._tabIndex = -1;
+
+      setTimeout(() => {
+        this._tabIndex = this._userTabIndex || 0;
+        this._changeDetectorRef.markForCheck();
+      });
+    }
+  }
+
   private _resetChips() {
     this._dropSubscriptions();
     this._listenToChipsFocus();

tools/public_api_guard/material/chips.d.ts

@@ -117,6 +117,7 @@ export declare class MatChipList extends _MatChipListMixinBase implements MatFor
     readonly valueChange: EventEmitter<any>;
     constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _defaultErrorStateMatcher: ErrorStateMatcher,
     ngControl: NgControl);
+    _allowFocusEscape(): void;
     _blur(): void;
     _focusInput(): void;
     _keydown(event: KeyboardEvent): void;