I have a user input box with autocomplete and I'm adding a button on the
right side so that a user can click and see the drop down list immediately
without having to type something first but I'm not sure why drop down list
is not showing when I click the button for the first time when the browser
is refreshed..
Right now the button only work (show dropdown list) when I type something
first in the input box and clear it.
I'll be really appreciated if I get any help or suggestion on how to make
this work.
HTML
```
<mat-form-field class="form" appearance="fill">
<mat-label>Select or Type out a Super Tag</mat-label>
<mat-chip-list #chipList>
<div>
<mat-chip *ngFor="let superTag of superTags"
[selectable]="selectable" [removable]="removable"
(removed)="remove(superTag)">
<img class="super-icon"
src="/assets/images/icons/super-tag-icon.svg">
{{superTag.tag}}
<mat-icon matChipRemove *ngIf="removable"
matTooltip="Remove a super tag">cancel</mat-icon>
</mat-chip>
</div>
<div>
<input matInput #input [(ngModel)]="tagIn"
[formControl]="tagCtrl" [matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="addTag()">
</div>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete"
(optionSelected)="selected($event)" autoActiveFirstOption>
<mat-option *ngIf="isLoading" class="is-Loading">
<mat-spinner diameter="20"></mat-spinner>
</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let tag of filteredSuperTags | async"
[value]="tag">
{{tag}}
</mat-option>
</ng-container>
</mat-autocomplete>
<button mat-icon-button
matSuffix
(click)="openPanel($event)"
color="primary">
<mat-icon aria-label="Add New State">arrow_drop_down</mat-icon>
</button>
</mat-form-field>
```
TS
````
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
@ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger})
inputAutoComplit: MatAutocompleteTrigger;
@ViewChild('autoTrigger', { read: MatAutocompleteTrigger })
autoTrigger: MatAutocompleteTrigger;
openPanel(evt): void {
evt.stopPropagation();
this.inputAutoComplit.openPanel();
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/94ea07e4-aa6d-4cdf-ac02-7519974eba67o%40googlegroups.com.
