如何在 Angular 中关闭 mat-select-filter 下拉菜单后重置搜索输入值？

Question

I am using the mat-select-filter package Link , for searching values from a list using drop-down and I take reference from this Demo .

As shown as Demo link search value is still the same after dropdown close.

I want to clear or reset the value on the search input field once the dropdown is closed.

As shown in the image "Ita" text is still coming after I select "Italy" from the drop-down. So is there any way to reset the value on search input after selecting the value or after drop-down close?

Thanks in Advance.

Answer 1

add (openedChange)="openedChange(matFilterBasic)" on mat-select in html ( this will clear input when select opened or closed )

<mat-form-field>
    <mat-select [disableOptionCentering]="true" #select1 placeholder="Auto Focus" (openedChange)="openedChange(matFilterBasic)">
        <mat-select-filter #matFilterBasic *ngIf="select1.focused" [array]="variables" (filteredReturn)="filteredList2 =$event"></mat-select-filter>
        <mat-option *ngFor="let item of filteredList2" [value]="item">
            {{item}}
        </mat-option>
    </mat-select>
</mat-form-field>

and in ts file add this function (tt is reference from MatSelectFilterComponent )

  openedChange(matFilter: any) {
    matFilter.searchForm.reset();
  }

check example here