fix(material-experimental/mdc-chips) Replace default values (#19006)

mat-chip-grid implements ControlValueAccessor. Its default value
right now is undefined; once a chip is added, its value is an array
of all the chip values. The default value for a given chip is all the
text content inside the chip. For chips with icons, this causes the
icon text to be included in the value, so a row chip using matChipRemove
would have a value like " hello cancel ". (There's also some unwanted
whitespace in the textContent).

Replace undefined with an empty array, and the textContent with just
the actual chip text, which in the case of row chips corresponds to the
text that the user entered.

These unintuitive values are the same as the old non-mdc
mat-chip-listbox. But due to the way the old listbox implemented
ControlValueAccessor, chips being used as a chip grid didn't actually
ever call the onChange handler to update the FormControl value, so their
values were basically ignored.

Author: vanessanschmitt

src/material-experimental/mdc-chips/chip-grid.ts

@@ -204,7 +204,7 @@ export class MatChipGrid extends _MatChipGridMixinBase implements AfterContentIn
   set value(value: any) {
     this._value = value;
   }
-  protected _value: any;
+  protected _value: Array<any> = [];
 
   /** Combined stream of all of the child chips' blur events. */
   get chipBlurChanges(): Observable<MatChipEvent> {
@@ -478,9 +478,9 @@ export class MatChipGrid extends _MatChipGridMixinBase implements AfterContentIn
   }
 
  /** Emits change event to set the model value. */
-  private _propagateChanges(fallbackValue?: any): void {
+  private _propagateChanges(): void {
     const valueToEmit = this._chips.length ? this._chips.toArray().map(
-      chip => chip.value) : fallbackValue;
+      chip => chip.value) : [];
     this._value = valueToEmit;
     this.change.emit(new MatChipGridChange(this, valueToEmit));
     this.valueChange.emit(valueToEmit);

src/material-experimental/mdc-chips/chip.ts

@@ -173,13 +173,14 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   }
   protected _disabled: boolean = false;
 
+  private _textElement!: HTMLElement;
 
-  /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */
+  /** The value of the chip. Defaults to the content inside the mdc-chip__text element. */
   @Input()
   get value(): any {
     return this._value !== undefined
       ? this._value
-      : this._elementRef.nativeElement.textContent;
+      : this._textElement.textContent!.trim();
   }
   set value(value: any) { this._value = value; }
   protected _value: any;
@@ -321,7 +322,6 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     this._animationsDisabled = animationMode === 'NoopAnimations';
     this._isBasicChip = _elementRef.nativeElement.hasAttribute(this.basicChipAttrName) ||
                         _elementRef.nativeElement.tagName.toLowerCase() === this.basicChipAttrName;
-
   }
 
   ngAfterContentInit() {
@@ -330,6 +330,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
 
   ngAfterViewInit() {
     this._chipFoundation.init();
+    this._textElement = this._elementRef.nativeElement.querySelector('.mdc-chip__text');
   }
 
   ngOnDestroy() {