Angular mat autocomplete not showing if input setValue

Question

When I click the input element, the autocomplete options are shown. But when I dynamically change the value of the input element, the autocomplete options are not shown.

<mat-form-field>
    <input type="text"
        [formControl]="dialTextControl"
        [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-optgroup *ngFor="let group of dialerUsersGroup" [label]="group.type">
            <mat-option *ngFor="let user of group.users" [value]="user.number">
              {{user.name}}
            </mat-option>
        </mat-optgroup>
    </mat-autocomplete>
</mat-form-field>


dialTextControl = new FormControl();
ngOnInit() {
    this.dialTextControl.valueChanges
      .subscribe(data => {
        this.filterGroups(data);
      });
}

filterGroups(value: string) {
    // my logic for updating dialerUsersGroup
}

setCustomValue() {
    this.dialTextControl.setValue('something'); // this does not make the autocomplete appear
}

How can the autocomplete be made visible when the input value is changed dynamically?

@Supercool. That filterGroups method's code is too long. It works, that filterGroups code is not the issue — user5155835
– user5155835, Commented Mar 29, 2020 at 11:36
I just wanted to see how you are filtering...if its too long thats fine — M A Salman
– M A Salman, Commented Mar 29, 2020 at 11:37

M A Salman · Accepted Answer · 2020-03-29 12:51:19Z

I assume you want to show the panel as soon as you set the value.for that to happen

Html: Use template reference for input too

<mat-form-field>
    <input type="text"
        [formControl]="dialTextControl"
       #autoCompleteInput  [matAutocomplete]="auto" >
    <mat-autocomplete #auto="matAutocomplete">
        <mat-optgroup *ngFor="let group of dialerUsersGroup" [label]="group.type">
            <mat-option *ngFor="let user of group.users" [value]="user.number">
              {{user.name}}
            </mat-option>
        </mat-optgroup>
    </mat-autocomplete>
</mat-form-field>

and in ts

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

setCustomValue() {
    this.dialTextControl.setValue('something'); // this does not make the autocomplete appear
    this.autocomplete.openPanel();
}

Stackblitz:https://stackblitz.com/edit/angular-o2itzp

Collectives™ on Stack Overflow

Angular mat autocomplete not showing if input setValue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related