fix(chips): allow null to be set as chip value (#16950)

Allows for the value `null` to be set as the value of a chip. Previously we were treating it as if it's `undefined`, presumably because of a type coercion.

Fixes #16844.

Author: crisbeto

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

@@ -8,7 +8,7 @@ import {Subject} from 'rxjs';
 import {MatChip, MatChipEvent, MatChipSet, MatChipsModule} from './index';
 
 
-describe('Chips', () => {
+describe('MatChip', () => {
   let fixture: ComponentFixture<any>;
   let chipDebugElement: DebugElement;
   let chipNativeElement: HTMLElement;
@@ -135,6 +135,24 @@ describe('Chips', () => {
     it('should not be focusable', () => {
       expect(chipNativeElement.getAttribute('tabindex')).toBeFalsy();
     });
+
+    it('should return the chip text if value is undefined', () => {
+      expect(chipInstance.value.trim()).toBe(fixture.componentInstance.name);
+    });
+
+    it('should return the chip value if defined', () => {
+      fixture.componentInstance.value = 123;
+      fixture.detectChanges();
+
+      expect(chipInstance.value).toBe(123);
+    });
+
+    it('should return the chip value if set to null', () => {
+      fixture.componentInstance.value = null;
+      fixture.detectChanges();
+
+      expect(chipInstance.value).toBeNull();
+    });
   });
 });
 
@@ -145,7 +163,7 @@ describe('Chips', () => {
         <mat-chip [removable]="removable"
                  [color]="color" [disabled]="disabled"
                  (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
-                 (removed)="chipRemove($event)">
+                 (removed)="chipRemove($event)" [value]="value">
           {{name}}
         </mat-chip>
       </div>
@@ -158,6 +176,7 @@ class SingleChip {
   color: string = 'primary';
   removable: boolean = true;
   shouldShow: boolean = true;
+  value: any;
 
   chipFocus: (event?: MatChipEvent) => void = () => {};
   chipDestroy: (event?: MatChipEvent) => void = () => {};

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

@@ -155,7 +155,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */
   @Input()
   get value(): any {
-    return this._value != undefined
+    return this._value !== undefined
       ? this._value
       : this._elementRef.nativeElement.textContent;
   }

src/material/chips/chip.spec.ts

@@ -9,7 +9,7 @@ import {Subject} from 'rxjs';
 import {MatChip, MatChipEvent, MatChipSelectionChange, MatChipsModule, MatChipList} from './index';
 
 
-describe('Chips', () => {
+describe('MatChip', () => {
   let fixture: ComponentFixture<any>;
   let chipDebugElement: DebugElement;
   let chipNativeElement: HTMLElement;
@@ -214,6 +214,24 @@ describe('Chips', () => {
 
         expect(chipInstance.rippleDisabled).toBe(true, 'Expected chip ripples to be disabled.');
       });
+
+      it('should return the chip text if value is undefined', () => {
+        expect(chipInstance.value.trim()).toBe(fixture.componentInstance.name);
+      });
+
+      it('should return the chip value if defined', () => {
+        fixture.componentInstance.value = 123;
+        fixture.detectChanges();
+
+        expect(chipInstance.value).toBe(123);
+      });
+
+      it('should return the chip value if set to null', () => {
+        fixture.componentInstance.value = null;
+        fixture.detectChanges();
+
+        expect(chipInstance.value).toBeNull();
+      });
     });
 
     describe('keyboard behavior', () => {
@@ -396,7 +414,7 @@ describe('Chips', () => {
                  [color]="color" [selected]="selected" [disabled]="disabled"
                  (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
                  (selectionChange)="chipSelectionChange($event)"
-                 (removed)="chipRemove($event)">
+                 (removed)="chipRemove($event)" [value]="value">
           {{name}}
         </mat-chip>
       </div>
@@ -411,6 +429,7 @@ class SingleChip {
   selectable: boolean = true;
   removable: boolean = true;
   shouldShow: boolean = true;
+  value: any;
 
   chipFocus: (event?: MatChipEvent) => void = () => {};
   chipDestroy: (event?: MatChipEvent) => void = () => {};

src/material/chips/chip.ts

@@ -176,7 +176,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   /** The value of the chip. Defaults to the content inside `<mat-chip>` tags. */
   @Input()
   get value(): any {
-    return this._value != undefined
+    return this._value !== undefined
       ? this._value
       : this._elementRef.nativeElement.textContent;
   }