I am working with form inside mat-dialog
and i have problem with closing mat-autocomplete
dropdown when clicked outside. I have mat-select implemented the sam way and he is working properly.
Here is my implementation for both elements
Autocomplete
<mat-form-field
appearance="outline"
floatLabel="always">
<mat-label class="input-label">{{ input.label }}</mat-label>
<input
matInput
[type]="input.inputType"
[name]="input.name"
[placeholder]="input.placeholder"
[id]="input.id"
[readonly]="input.readOnlyOnAction.includes(formAction)"
[formControlName]="input.controlName"
[matAutocomplete]="auto" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option
*ngFor="let item of input.filteredData"
[value]="item[input.dataValue]">
{{ item[input.dataLabel] }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Select
<mat-form-field
appearance="outline"
floatLabel="always">
<app-svm-svg-icon-hover-rotate
matSuffix
svgIcon="chevron"
[rotate]="false"
[rotateAngle]="180"
iconStroke="#0069B4"
[rotate]="select.panelOpen"
[rotateAngle]="180"
(click)="select.panelOpen ? select.close() : select.open()">
</app-svm-svg-icon-hover-rotate>
<mat-label class="input-label">{{ input.label }}</mat-label>
<mat-select
matNativeControl
[placeholder]="input.placeholder"
[id]="input.id"
[formControlName]="input.controlName"
#select>
<ng-container *ngIf="input.data?.length > 0; else noData">
<mat-option
*ngFor="let item of input?.data"
[value]="item[input.dataValue]">
{{ item[input.dataLabel] }}
</mat-option>
</ng-container>
<ng-template #noData>
<mat-option> No Data </mat-option>
</ng-template>
</mat-select>
</mat-form-field>