Open matAutocomplete with open openPanel() method

Question

I'm working with Angular Material's matAutocomplete component, and according to the docs, there is a method which can open/close an autocomplete panel with a openPanel()/closePanel() method. Any suggestion to how can I integrate it into already working example?

Here is a what I did with live example while trying to implement the feature.

Answer 1

The Material documentation should be clearer. Whilst there are various gymnastic routines you can do to achieve this functionality (like manipulating the document object, using @ViewChild, or creating event listeners), for me it boils down to the two following ways:

1 Minimalist:

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="$event.stopPropagation(); trigger.openPanel()">{{o}}</mat-option>

    </mat-autocomplete>
</mat-form-field>

Here we're attaching the MatAutoCompleteTrigger directive to the input and assigning it to a variable named trigger. This trigger directive is passed to the click method on each mat-option, which fires every time an option is selected from the menu. The directive contains two pertinent methods. Here we call openPanel. We call stopPropagation on the $event object to prevent the native methods doing anything unexpected.

2 Explicitist:

.html

<mat-form-field>
    <input #nameInput
           matInput
           formControlName="name"
           #trigger="matAutocompleteTrigger"  
           [matAutocomplete]="autoName">

    <mat-autocomplete #autoName="matAutocomplete">

        <mat-option *ngFor="let o of suggestionOpts"
                    [value]="o"
                    (click)="selectionMade($event, trigger)">{{o}}</mat-option>

    </mat-autocomplete>
</mat-form-field>

.ts

import { MatAutocompleteTrigger } from '@angular/material/autocomplete';

...

selectionMade(event: Event, trigger: MatAutocompleteTrigger) {
    event.stopPropagation();
    trigger.openPanel();
}

Here we're passing the directive and event object to a function in the component's .ts file, and performing exactly the same logic as the first approach. If blanket separation of concerns is a concern, do things this way. For small jobs like this I prefer the minimalist approach, but each unto their own, I guess.

Answer 2

in template

<button (click)='openPanel($event)'>Open</button>

<input #inputAutoComplete>

in ts

@ViewChild(MatAutocompleteTrigger, {read: MatAutocompleteTrigger}) inputAutoComplete: MatAutocompleteTrigger;


openPanel(evt): void {
  evt.stopPropagation();
  this.inputAutoComplete.openPanel();
}

Answer 3

Please add stopPropagation or defer the openPanel using setTimeout as follows.

Because at button click end focus changes from input field back to ur button so autocomplete is hiding immediately

Option 1: Stop Propagatioan

<button (click)="openAutocomplete($event)">toggle autocomplete (1 way)</button>
...
openAutocomplete(evt) {
  evt.stopPropagation()
  this.autoTrigger.openPanel();
}

Option 2 - SetTimeout

openAutocomplete() {
  setTimeout(() => {
    this.autoTrigger.openPanel();
  }, 0)
}