After combining mat-chips autocomplete and input as per the example section in the documentation, I encountered an issue. When I type a part of an Autocomplete Option to filter the options and then click on it, both the input value and the clicked item get added to the chip list. While this behavior seems logical, as there's no reason for it to ignore the blur event when the item was clicked, I'm wondering if there's a built-in way or a hack to address this issue. Below is my code snippet:
<mat-form-field class="chip-list">
<mat-chip-list #chipList aria-label="Op selection" class="mat-chip-list-stacked">
<mat-basic-chip *ngFor="let sop of selectedOps" [selectable]="selectable"
[removable]="removable" (removed)="remove(sop)">
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
{{sop.val}}
</mat-basic-chip>
</mat-chip-list>
<div style="position: relative;">
<input matInput [formControl]="chipControl" aria-label="subcats" #SelectInput
[matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)" [matChipInputAddOnBlur]="addOnBlur">
<mat-icon class="icon" (click)="SelectInput.focus()">keyboard_arrow_down</mat-icon>
</div>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let op of filteredOps | async" [value]="op">
<div (click)="optionClicked($event, op)">
<mat-checkbox [checked]="op.selected" (change)="toggleSelection(op)"
(click)="$event.stopPropagation(); ">
{{ op.val }}
</mat-checkbox>
</div>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Am I missing something here? Or are these elements not meant to work together in the first place? Any feedback would be appreciated!