Make auto-complete panel of input always visible once we click on button(angular

Question

auto-complete panel gets visible only when input is active which happens only when the page is loaded. But in this scenario, the input is first hidden and gets visible once we click on the button input get visible but not with autofocus (even though I have applied autofocus attribute )which makes auto-complete suggestion panel hidden. I need something which on button click opens the input and auto-complete panel together without addition click on an input to activate it

    <div *ngIf="isOpen" class="filter-menu">
        <mat-form-field appearance="fill">
            <input type="text" matInput [matAutocomplete]="auto" autofocus>
            <mat-autocomplete #auto="matAutocomplete" >
                <mat-option *ngFor="let filter of filter" [value]="filter.filterName">
                  {{filter.filterName}}
                </mat-option>
              </mat-autocomplete>
        </mat-form-field>
    </div>
</div>