Mat auto complete panel is not opening for the first time

Question

I'm encountering an issue where the mat-panel in your Angular application's mat-autocomplete component does not opening panel immediately when the input field is focused. Instead, it only opens after the user has entered some text. after enter something then after it is working fine I want the mat-panel opens as soon as the input field is focused, I have used class, I have two autocompletes in same form here is my code html

    <mat-form-field class="width">
      <input type="text" formControlName="tpa" matInput [matAutocomplete]="tpaAuto" />
      <mat-autocomplete #tpaAuto="matAutocomplete" [displayWith]="displayTpa.bind(this)">
        <mat-option *ngFor="let data of exportPdfInstance.filteredTPA | async" [value]="data">
          <span>{{ data.tpaName }}</span>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

here is my component.ts

ngOnInit(): void {
this.creatingForm();
this.exportPdfInstance.onFetchTPA()
this.exportPdfInstance.onFetchProgram(0);
this.exportPdfInstance.searchFiltertpa(this.tpa_program_form);
this.exportPdfInstance.searchFilterprogram(this.tpa_program_form);
  }

here is my class.ts code, where I'm fetching the data from server and filtering the data.

onFetchTPA() {
    this.validation_dialog_box = true;
    let responseData: any
    this.fr_write_service.onFetchTPA().subscribe((data) => {
        responseData = data
        this.tpaDetails = JSON.parse(responseData)
        this.tpaDetails = this.tpaDetails?.sort(function (a, b) {
            if (a.tpaName < b.tpaName) { return -1; }
            if (a.tpaName > b.tpaName) { return 1; }
            return 0;
        });
        this.validation_dialog_box = false;

    }, (error) => {
        this.errorPopup(error)
    });

}

searchFiltertpa(formDetails) {
    const tpaCntrl = formDetails.get('tpa');
    if (tpaCntrl) {
        this.filteredTPA = tpaCntrl.valueChanges.pipe(
            startWith(''),
            map((value: any) => (typeof value === 'string' ? value : value.tpaName)),
            map((tpa) => (tpa ? this.filtertpa(tpa) : this.tpaDetails.slice()))
        );
    }
}
filtertpa(tpaData: any) {
    let arr = this.tpaDetails.filter(
        (tpa) => tpa.tpaName.toLowerCase().indexOf(tpaData.toLowerCase()) === 0
    );
    return arr.length ? arr : [{ tpaName: 'No Item found' }];
}

please suggest where went wrong for not opening panel for the first time