Chip Input: Should split pasted text

[dpurp]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Pasting the text: apple, banana, orange, into a chip input should result in three different chips.

What is the current behavior?

Produces a single chip with all three items.

What are the steps to reproduce?

1. Copy the text: apple, banana, orange,
2. Paste it into the example input on the Angular Material chip input demo site
3. Press Enter
4. There should be three chips (right now, only there is only one)

What is the use-case or motivation for changing an existing behavior?

Allow inputting data via copy/paste.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material 6.2.1

Is there anything else we should know?

[majidjam]

add Html :

<mat-form-field class="demo-chip-list"> <mat-chip-list #chipList> <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)"> {{fruit.name}} <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon> </mat-chip> <input placeholder="New fruit..." [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)" (paste)="paste($event)"/> </mat-chip-list> </mat-form-field>

then Add Component :

import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material';
import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';

/**

• @title Chips with input
  */
  @component({
  selector: 'chips-input-example',
  templateUrl: 'chips-input-example.html',
  styleUrls: ['chips-input-example.css']
  })
  export class ChipsInputExample {
  visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;

// Enter, comma
separatorKeysCodes = [ENTER, COMMA, SEMICOLON];

fruits = [
{ name: 'Lemon' },
{ name: 'Lime' },
{ name: 'Apple' },
];

paste(event: ClipboardEvent): void {
event.preventDefault();
event.clipboardData
.getData('Text')
.split(/;|,|\n/)
.forEach(value => {
if(value.trim()){
this.fruits.push({ name: value.trim() });
}
})
}
add(event: MatChipInputEvent): void {
let input = event.input;
let value = event.value;

// Add our fruit
if ((value || '').trim()) {
  this.fruits.push({ name: value.trim() });
}

// Reset the input value
if (input) {
  input.value = '';
}

}

remove(fruit: any): void {
let index = this.fruits.indexOf(fruit);

if (index >= 0) {
  this.fruits.splice(index, 1);
}

}
}

/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */

Good Time @dpurp ,

[WESquad-oldmember]

Need this! <3 +1

[pratipb]

Thank you :)

[Santoshah]

credit link