angular material mat-autocomplete issues

Question

i am having a input box with mat-autocomplete. there is a search button that i hit to get the matching entries to populate the suggestions. Though overall it works but the behavior is bit annoying. This is what happens:

I type ra and hit enter.
after while the progress indicator returns and i see no other visual changes.
if i hit down or right arrow etc i see no suggestions
if i delete the last character then it shows the suggestions.

the ui code looks like:

<div fxLayout="row" fxLayoutAlign="start center">
      <div>
        <form >
            <mat-form-field >
                <input type="text" placeholder="Opportunity name" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                    {{ option.name }}
                </mat-option>
                </mat-autocomplete>
            </mat-form-field> 
            </form>
      </div>
      <div>&nbsp;<mat-icon (click)="refreshOptyList()">search</mat-icon>
      </div>  

  </div>

the refreshOptyList function is as follow:

refreshOptyList(){
       this.diaRef = this.dialog.open(MessageDialogComponent, {
          width: '250px',
          disableClose: true,
          data: { "message": "Please wait...", "showProgress": true }
     });

      this.revSvc.getOptyList(this.keyword).then(
        (val:any) => {
                        this.diaRef.close()
                        this.optyArr = JSON.parse(val._body).items;

                        for(let op of this.optyArr){
                          this.options.push(new Opty(op.Name, op.OptyNumber))
                        }
                     }
      )

  }

Could you add the filteredOptions logic? You are ferencing this.options but I can seed filterOptions anywhere. — Leonardo Neninger, Jan 25 '18 at 20:27

score 0 · Answer 1 · answered Jan 25 '18 at 10:06

I'm currently working with the same material and I've noticed something different here.

Sadly, I cant promise if this will work tho, because I'm new to Material myself but hopefully this will help you:

Your query function should be used in your option. I dont know if this will work tho

*ngFor="let option of refreshOptyList()

Something else you could try is to return the $http response in your query function

return $http( { url: '/foo/bar', method: 'POST', data: JSON.stringify({})  })
.then(response => {
    return response.data;
})
.catch(err => {
    return []; // { error: { source: "foo/bar/post" }, err: err };
});

Hope this helps :)

angular material mat-autocomplete issues

1 Answers1