After creating an autocomplete chiplist component in Angular, I noticed that when a user adds or removes an item, the suggestion list disappears and the input field is cleared.
However, I would prefer to keep the autocomplete list open (or reopen it) so that the user does not have to trigger it by typing in the input field again.
Currently, the autocomplete only opens when the user starts typing;
chip-list.component.ts
constructor() {
this.filteredItems = this.itemCtrl.valueChanges.pipe(
map((item: string | T) => {
if (typeof item === 'string') {
return this._filter(item);
}
return this.allItems.filter(
(x) => this.selectedItems.indexOf(x) === -1
);
})
);
}
chip-list.component.html
<mat-form-field [formGroup]="group" class="mat-form-field-prefix">
<mat-chip-list #chipList aria-label="Item selection">
<mat-icon *ngIf="iconName" matPrefix>{{ iconName }}</mat-icon>
<mat-chip
*ngFor="let item of selectedItems"
[selectable]="false"
[removable]="true"
(removed)="remove(item)"
(click)="remove(item)"
>
{{ this.getItemName(item) }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input
matInput
placeholder=""
#itemInput
(click)="itemCtrl.valueChanges.emit()"
[formControl]="itemCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
class="mat-form-field-infix"
/>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option
*ngFor="let item of filteredItems | async"
[value]="item"
>
{{ this.getItemName(item) }}
</mat-option>
</mat-autocomplete>
</mat-form-field>