0

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.

Hareesh
  • 6,770
  • 4
  • 33
  • 60
  • I tried creating a form and patching value to form control and tried to code the panel and it worked so maybe if you can share a stackblitz that would be help ful. – indrajeet Sep 30 '20 at 13:59
  • I tried creating a form and patching value to form control and tried to close the panel using `closePanel()` and it worked so maybe if you can share a stackblitz that would be helpful. – indrajeet Sep 30 '20 at 14:06

0 Answers0