fix(chips): not updating keyboard controls if direction changes (#14080)

Fixes the chip list not updating the direction of its keyboard controls, if the direction changes after the component has been initialized.

Author: crisbeto

src/lib/chips/BUILD.bazel

@@ -45,6 +45,7 @@ ng_test_library(
   name = "chips_test_sources",
   srcs = glob(["**/*.spec.ts"]),
   deps = [
+    "@rxjs",
     "@angular//packages/animations",
     "@angular//packages/forms",
     "@angular//packages/platform-browser",

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

@@ -7,6 +7,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {Subject} from 'rxjs';
 import {MatChipInput, MatChipInputEvent} from './chip-input';
 import {MatChipsModule} from './index';
 import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
@@ -27,7 +28,10 @@ describe('MatChipInput', () => {
       declarations: [TestChipInput],
       providers: [{
         provide: Directionality, useFactory: () => {
-          return {value: dir.toLowerCase()};
+          return {
+            value: dir.toLowerCase(),
+            change: new Subject()
+          };
         }
       }]
     });

src/lib/chips/chip-list.spec.ts

@@ -35,6 +35,7 @@ import {FormControl, FormsModule, NgForm, ReactiveFormsModule, Validators} from
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Subject} from 'rxjs';
 import {MatInputModule} from '../input/index';
 import {MatChip} from './chip';
 import {MatChipInputEvent} from './chip-input';
@@ -50,6 +51,7 @@ describe('MatChipList', () => {
   let chips: QueryList<MatChip>;
   let manager: FocusKeyManager<MatChip>;
   let zone: MockNgZone;
+  let dirChange: Subject<Direction>;
 
   describe('StandardChipList', () => {
     describe('basic behaviors', () => {
@@ -422,6 +424,38 @@ describe('MatChipList', () => {
           expect(chipListInstance._tabIndex).toBe(4, 'Expected tabIndex to be reset back to 4');
         }));
       });
+
+      it('should account for the direction changing', () => {
+        setupStandardList();
+        manager = chipListInstance._keyManager;
+
+        let nativeChips = chipListNativeElement.querySelectorAll('mat-chip');
+        let firstNativeChip = nativeChips[0] as HTMLElement;
+
+        let RIGHT_EVENT: KeyboardEvent =
+          createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
+        let array = chips.toArray();
+        let firstItem = array[0];
+
+        firstItem.focus();
+        expect(manager.activeItemIndex).toBe(0);
+
+        chipListInstance._keydown(RIGHT_EVENT);
+        chipListInstance._blur();
+        fixture.detectChanges();
+
+        expect(manager.activeItemIndex).toBe(1);
+
+        dirChange.next('rtl');
+        fixture.detectChanges();
+
+        chipListInstance._keydown(RIGHT_EVENT);
+        chipListInstance._blur();
+        fixture.detectChanges();
+
+        expect(manager.activeItemIndex).toBe(0);
+      });
+
     });
   });
 
@@ -1239,8 +1273,12 @@ describe('MatChipList', () => {
   }
 
   function setupStandardList(direction: Direction = 'ltr') {
+    dirChange = new Subject();
     fixture = createComponent(StandardChipList, [{
-      provide: Directionality, useFactory: () => ({value: direction.toLowerCase()})
+      provide: Directionality, useFactory: () => ({
+        value: direction.toLowerCase(),
+        change: dirChange
+      })
     }]);
     fixture.detectChanges();
 

src/lib/chips/chip-list.ts

@@ -352,6 +352,12 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
       .withVerticalOrientation()
       .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
 
+    if (this._dir) {
+      this._dir.change
+        .pipe(takeUntil(this._destroyed))
+        .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(() => {

src/lib/chips/chip.spec.ts

@@ -4,6 +4,7 @@ import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
 import {Component, DebugElement} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {Subject} from 'rxjs';
 import {MatChip, MatChipEvent, MatChipSelectionChange, MatChipsModule} from './index';
 
 
@@ -20,7 +21,10 @@ describe('Chips', () => {
       imports: [MatChipsModule],
       declarations: [BasicChip, SingleChip],
       providers: [{
-        provide: Directionality, useFactory: () => ({value: dir})
+        provide: Directionality, useFactory: () => ({
+          value: dir,
+          change: new Subject()
+        })
       }]
     });