Mat Autocomplete do not closes when mat stepper changes programmatic

Question

I have a mat autocomplete which triggers a function on optionSelected()

<mat-form-field fxLayout="column">
    <input  matInput
            [matAutocomplete]="auto"
            #trigger="matAutocompleteTrigger"
            formControlName="shop">
    <mat-autocomplete   #auto="matAutocomplete"
                        [displayWith]="displayFn" 
                        (optionSelected)="selectedShop($event, stepper)">
                        <mat-option>...</mat-option>
                        </mat-autocomplete>
</mat-form-field>

The above form is inside a mat-stepper component. On optionSelected i have following function

selectedShop(event, stepper) {

    const shopData = event.option.value as Shop;

    if(shopData) {
      this.registerForm.patchValue({ secondaryMobile: shopData.secondaryMobile });
      stepper.next();
    }
}

when someone selects the autocomplete it will set the value of a reactive form and move to next stepper. and it works fine, but the autocomplete dropdown panel still stays on top.

i have tired

@ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;

if(shopData) {
      this.registerForm.patchValue({ secondaryMobile: shopData.secondaryMobile });
      stepper.next();
      this.autocompleteTrigger.closePanel();
}

also tried inside ngAfterViewInit() but failed. The panel never closes. i am using angular version 10.

Please help.