add clearInput method to MatChipInputEvent

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.clearInput();
 
     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.clearInput();
   }
 
   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.clearInput();
   }
 
   remove(person: Person): void {

src/material/chips/chip-input.ts

@@ -30,6 +30,9 @@ export interface MatChipInputEvent {
 
   /** The value of the input. */
   value: string;
+
+  /** Call to clear the value of the input */
+  clearInput(): void;
 }
 
 // Increasing integer for generating unique ids.
@@ -185,12 +188,18 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy, A
     if (!this._inputElement.value && !!event) {
       this._chipList._keydown(event);
     }
-    if (!event || this._isSeparatorKey(event)) {
-      this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });
 
-      if (event) {
-        event.preventDefault();
-      }
+    if (!event || this._isSeparatorKey(event)) {
+      this.chipEnd.emit({
+        input: this._inputElement,
+        value: this._inputElement.value,
+        clearInput: () => {
+          this._inputElement.value = '';
+          this._focusLastChipOnBackspace = true;
+        }
+      });
+
+      event?.preventDefault();
     }
   }
 

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

@@ -1516,21 +1516,18 @@ class InputChipList {
   isRequired: boolean;
 
   add(event: MatChipInputEvent): void {
-    let input = event.input;
-    let value = event.value;
+    const value = (event.value || '').trim();
 
     // Add our foods
-    if ((value || '').trim()) {
+    if (value) {
       this.foods.push({
-        value: `${value.trim().toLowerCase()}-${this.foods.length}`,
-        viewValue: value.trim()
+        value: `${value.toLowerCase()}-${this.foods.length}`,
+        viewValue: value
       });
     }
 
-    // Reset the input value
-    if (input) {
-      input.value = '';
-    }
+    // Clear the input value
+    event.clearInput();
   }
 
   remove(food: any): void {

src/material/chips/chip-list.ts

@@ -66,7 +66,6 @@ export class MatChipListChange {
     public value: any) { }
 }
 
-
 /**
  * A material design chips component (named ChipList for its similarity to the List component).
  */

tools/public_api_guard/material/chips.d.ts

@@ -106,6 +106,7 @@ export declare class MatChipInput implements MatChipTextControl, OnChanges, OnDe
 export interface MatChipInputEvent {
     input: HTMLInputElement;
     value: string;
+    clearInput(): void;
 }
 
 export declare class MatChipList extends _MatChipListMixinBase implements MatFormFieldControl<any>, ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy, CanUpdateErrorState {