Revert "Revert "feat(material/chips): prevent chips from being delete… (#22235)

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

This is a roll-forward of the original PR. We will need to resolve the
issues in Google's code base that caused it to be reverted before
merging again.

This reverts commit 4381b8e.

* fixup! Revert "Revert "feat(material/chips): prevent chips from being deleted when user holds backspace (#19700)""

* fixup! Revert "Revert "feat(material/chips): prevent chips from being deleted when user holds backspace (#19700)""

Author: mmalerba

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 {