2
I’m using the Material Auto Complete Angular
After selecting an option from the list the mat-options disappear, I would like them to remain until you click out of the input. Follow gif showing the problem:
My html:
<div class="col-xl-6 margemColunas">
<label>Anunciaremos nas contas *</label>
<input class="form-control inputContasB2W"
#inputContasB2W
[formControl]="contasB2WControl"
[matAutocomplete]="auto"
(matChipInputTokenEnd)="add($event)">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, i)">
<mat-option *ngFor="let contaB2W of contasFiltradas | async" [value]="contaB2W">
{{contaB2W}}
</mat-option>
</mat-autocomplete>
</div>
<div class="col-xl-6 alinhaChips">
<mat-chip-list>
<mat-chip
*ngFor="let contaB2W of produto.contasAnunciarB2W; let j = index"
[selectable]="selected"
[removable]="removable"
(removed)="removeTag(i, j)">
{{contaB2W}}
<mat-icon matChipRemove><i class="fa fa-close"></i></mat-icon>
</mat-chip>
</mat-chip-list>
</div>
My TS:
constructor(){
this.contasFiltradas = this.contasB2WControl.valueChanges.pipe(
startWith(null),
map((nomeConta: string | null) => nomeConta ? this._filter(nomeConta) : this.contasB2W.slice()));
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.contasB2W.filter(conta => conta.toLowerCase().indexOf(filterValue) === 0);
}
selected(event: MatAutocompleteSelectedEvent, index: number): void {
this.produtosConfirmadosAnuncio[index].contasAnunciarB2W.push(event.option.viewValue);
this.inputContasB2W.nativeElement.value = '';
}
}
And if you use a select instead of an input?
– LeAndrade
@Leandrade material mat-complete angular design has only input support. If you try to put the entries in a select it returns: "Can’t bind to 'matAutocomplete' Since it isn’t a known Property of 'select'." I saw that in the documentation it has the property "panelClosingActions" but I still can’t find it in their code.
– veroneseComS
According to the property description: "A stream of actions that should close the autocomplete panel, including when an option is Selected, on Blur, and when TAB is pressed."
– veroneseComS
Yes, there is no way to type in a select, just choose options, I say if there could be the possibility of using a select instead of input?
– LeAndrade
No, I managed to solve otherwise, I’ll add the answer
– veroneseComS