feat(material/chips): prevent chips from being deleted when user holds backspace (#19700)

* feat(material/chips): prevent chips from being deleted when user holds backspace

* add unit tests

* replace MatChipInputEvent.clearInput with MatChipInputEvent.chipInput.clear()

* fix unit test to actually test wanted behaviour

* update mdc-chips/chip-input.ts

* update chip-grid, update demos and add tests to spec

* make MatChipInputEvent.chipInput temporarily optional (for backward compatibility)

* yarn approve-api chips

* Merge remote-tracking branch 'upstream/master' into giorag/chip-list-focus-last-chip-on-backspace-v2

Author: gioragutt

src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts

@@ -34,18 +34,15 @@ export class ChipsAutocompleteExample {
   }
 
   add(event: MatChipInputEvent): void {
-    const input = event.input;
-    const value = event.value;
+    const value = (event.value || '').trim();
 
     // Add our fruit
-    if ((value || '').trim()) {
-      this.fruits.push(value.trim());
+    if (value) {
+      this.fruits.push(value);
     }
 
-    // Reset the input value
-    if (input) {
-      input.value = '';
-    }
+    // Clear the input value
+    event.chipInput!.clear();
 
     this.fruitCtrl.setValue(null);
   }

src/components-examples/material/chips/chips-input/chips-input-example.ts

@@ -27,18 +27,15 @@ export class ChipsInputExample {
   ];
 
   add(event: MatChipInputEvent): void {
-    const input = event.input;
-    const value = event.value;
+    const value = (event.value || '').trim();
 
     // Add our fruit
-    if ((value || '').trim()) {
-      this.fruits.push({name: value.trim()});
+    if (value) {
+      this.fruits.push({name: value});
     }
 
-    // Reset the input value
-    if (input) {
-      input.value = '';
-    }
+    // Clear the input value
+    event.chipInput!.clear();
   }
 
   remove(fruit: Fruit): void {

src/dev-app/chips/chips-demo.ts

@@ -11,7 +11,6 @@ import {Component} from '@angular/core';
 import {MatChipInputEvent} from '@angular/material/chips';
 import {ThemePalette} from '@angular/material/core';
 
-
 export interface Person {
   name: string;
 }
@@ -61,17 +60,15 @@ export class ChipsDemo {
   }
 
   add(event: MatChipInputEvent): void {
-    const {input, value} = event;
+    const value = (event.value || '').trim();
 
     // Add our person
-    if ((value || '').trim()) {
-      this.people.push({ name: value.trim() });
+    if (value) {
+      this.people.push({ name: value });
     }
 
-    // Reset the input value
-    if (input) {
-      input.value = '';
-    }
+    // Clear the input value
+    event.chipInput!.clear();
   }
 
   remove(person: Person): void {

src/dev-app/mdc-chips/mdc-chips-demo.ts

@@ -61,17 +61,15 @@ export class MdcChipsDemo {
   }
 
   add(event: MatChipInputEvent): void {
-    const {input, value} = event;
+    const value = (event.value || '').trim();
 
     // Add our person
-    if ((value || '').trim()) {
-      this.people.push({ name: value.trim() });
+    if (value) {
+      this.people.push({ name: value });
     }
 
-    // Reset the input value
-    if (input) {
-      input.value = '';
-    }
+    // Clear the input value
+    event.chipInput!.clear();
   }
 
   remove(person: Person): void {