Mat Auto Complete does not open dropdown panel after clicking Clear button

I have custom Mat Auto Complete in Angular project. It has 2 suffixes, Clear and Dropdown buttons. When I click on clear button code this.myControl.reset('', { emitEvent: true }); resets the input value. But the dropdown panel does not open. I tried to use following formats and none worked

1. this.myControl.reset();
2. this.myControl.reset('', { emitEvent: true });
3. this.myControl.patchValue('');

StackBlitz Demo

autocomplete-display-example.ts

.......

 clearInput() {
    this.arrowIcon = "arrow_drop_down";
    this.myControl.reset('', { emitEvent: true });
  }

......

autocomplete-display-example.html

<form class="example-form">
 <mat-form-field class="example-full-width">
   <mat-label>Assignee</mat-label>
   <input
     type="text"
     matInput
     [formControl]="myControl"
     [matAutocomplete]="auto"

   />
   <div matSuffix style="display:flex">
     <button
       *ngIf="myControl!==undefined && myControl.value!==null && myControl?.value!==''"
       mat-icon-button
       aria-label="Clear"
       (click)="clearInput()"
       type="button"
     >
       <mat-icon>clear</mat-icon>
     </button>

     <button mat-icon-button aria-label="Clear" type="button">
       <mat-icon>{{arrowIcon}}</mat-icon>
     </button>
   </div>

   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (opened)="arrowIcon='arrow_drop_up'"
     (closed)="arrowIcon='arrow_drop_down'" (optionSelected)="arrowIcon='arrow_drop_down'">
     <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
       {{option.name}}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>
</form>

<!-- Copyright 2020 Google LLC. All Rights Reserved.
   Use of this source code is governed by an MIT-style license that
   can be found in the LICENSE file at http://angular.io/license -->

Okay, when I click on Clear icon, it resets the form control and also closes the panel. To fix this we can open the panel manually. Inject the MatAutocompleteTrigger to the method along with event

See the updated StackBlitz Demo.

  openPanel(evt: any, trigger: MatAutocompleteTrigger): void {
    evt.stopPropagation();
    this.myControl?.reset();
    trigger.openPanel();
    this.inputAutoComplete?.nativeElement.focus();
  }

Add #trigger="matAutocompleteTrigger" to the input and pass this to button click() method

autocomplete-display-example.html

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Assignee</mat-label>
    <input #inputAutoComplete
           [formControl]="myControl"
           [matAutocomplete]="auto"
           #trigger="matAutocompleteTrigger"
           matInput
           type="text"
    />

    <div matSuffix style="display:flex">
      <button
        (click)="openPanel($event, trigger)"
        *ngIf=" myControl?.value!==null && myControl?.value!==''"
        aria-label="Clear"
        mat-icon-button
        type="button"
      >
        <mat-icon>clear</mat-icon>
      </button>

      <button aria-label="Clear" mat-icon-button type="button">
        <mat-icon>{{arrowIconSubject.getValue()}}</mat-icon>
      </button>
    </div>

    <mat-autocomplete #auto="matAutocomplete" (closed)="arrowIconSubject.next('arrow_drop_down')"
      (opened)="arrowIconSubject.next('arrow_drop_up')" (optionSelected)="arrowIconSubject.next('arrow_drop_down')"
      [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async " [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>