How do I get the the dropdown for the following Angular Material Auto-complete input field to show all the available options when clicked?

Question

So I have a functioning searchable input field here, which has an auto-complete feature that will show a filtered drop-down of options based on what value user enters in it. I however want to add a logic to it such that the dropdown must show with all of the available options when the input field is clicked and the user isn't typing anything (un-filtered) (ie. currently the dropdown shows up only when user clicks on the input field and types something or deletes some existing value(if any), I want to show a dropdown listed with all of the available options as and when the input field is clicked and this dropdown should be hidden and replaced with the auto-complete supported dropdown when the user types a value)

NB: At a time only one value can be selected in this input field currently

This is the code

HTML:

 <mat-form-field class="muliti-selector with-arrow">
          <mat-label translate>Business Category</mat-label>
          <mat-chip-list #chipList>
            <mat-chip
              [id]="category?.id"
              class="category-chip"
              *ngFor="let category of categories"
              (removed)="removeCategory(category)"
              color="accent"
            >
              {{ category }}
            </mat-chip>
            <input
              placeholder=""
              #categoryInput
              [formControl]="businessCategories"
              [matAutocomplete]="auto"
              [matChipInputFor]="chipList"
              (matChipInputTokenEnd)="addCategory($event)"
              (input)="categoryNullChecker()"
              (click)="showCategoriesDefault()"
            />
          </mat-chip-list>
          <mat-autocomplete
            #auto="matAutocomplete"
            (optionSelected)="selectedCategory($event)"
          >
            <mat-option
              *ngFor="let category of filteredCategories | async"
              [value]="category"
            >
              {{ category.name }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

TS file:

 ngOnInit(){
   this.filteredCategories = this.businessCategories.valueChanges.pipe(
  startWith(null),
  map((category) =>
    category ? this.filter(category) : this.allCategories.slice()
  )
);
}


    get businessCategories(): FormControl {
    return this.form.get(
      'category'
    ) as FormControl;
  }

  removeCategory(category: string): void {
    const index = this.categories.indexOf(category);

    if (index >= 0) {
      this.categories.splice(index, 1);
    }
  }

  addCategory(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();
    if (value) {
      this.categories = [];
      this.categories.push(value);
    }

    event.chipInput?.clear();
  }

  selectedCategory(event: MatAutocompleteSelectedEvent): void {
    if (this.categoryInput) {
      this.categoryInput.nativeElement.value = event.option.value.name;
    }
    this.businessCategories.setValue(event.option.value.id);
    this.previousCategory = this.businessCategories.value;
  }

  private filter(value: string): string[] {
    const filterValue = value.toString().toLowerCase();

    return this.allCategories.filter((category) =>
      category.name!.toString().toLowerCase().includes(filterValue)
    );
  }

  categoryNullChecker() {
    if (this.categories.length > 0) {
      this.categoryInput.nativeElement.value = '';
      this.categories = [];
    }
  }

  showCategoriesDropDown(){
    this.businessCategories.markAsTouched()
    this.businessCategories.markAsPending()
    this.businessCategories.markAsPristine()
  }