angular / angular/components

bug(Chip Input): matChipInputSeparatorKeyCodes won't recognize ";" and doesn't recognize pasted text

Open
#21,217 15 comments 2 reactions 0 assignees View on GitHub
area: material/chips feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

Use StackBlitz to reproduce your issue:
[https://stackblitz.com/edit/angular-cr3nwj?file=src/app/chips-autocomplete-example.ts](https://stackblitz.com/edit/angular-cr3nwj?file=src/app/chips-autocomplete-example.ts)

Steps to reproduce:
1. Using a mat-form-field with mat-chip-list and an input.
2. Declare the [matChipInputSeparatorKeyCodes]="separatorKeysCodes", with separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON, 188];
3. Use a ";" in the input to trigger the chipEnd event. But i won't trigger. Neither by pressing the semicolon (EU Keyboard keys: shift + ,")
4. The input wont trigger the chipEnd after pasting text into the input and doesnt check for the separatorKeys in the pasted text.


#### Expected Behavior

The chipEnd event should be triggered after typing the Semicolon into to the input.
Also should pasted text be regnozed and processed based on the declared separatorKeys.
For example:
separatorKeys [COMMA]
Pasted text: "name1, name2, name3"
After pasting chipEnd event triggers and created 3 chips: "name1", "name2", "name3"

#### Actual Behavior
Semicolon doesn't trigger any event and will just display in the input.
Pasted text also doesn't trigger any event and will just display in the input.

#### Environment

- Angular: 11.0.0
- CDK/Material: 11.0.0
- Browser(s): Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro

Contributor guide

Open the contributing guide

Research direction

Begin with the StackBlitz entry point at src/app/chips-autocomplete-example.ts and the mat-chip-list input configured with matChipInputSeparatorKeyCodes. Trace how chipEnd is triggered for keyboard input and pasted text. Done means semicolon input triggers chipEnd and pasted comma-separated text creates separate chips.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.