MatAutocompleteTrigger does not work with response data

Question

I have a table with multiple rows, each row specifies different departments. There are multiple columns with each column belonging to a group. All the columns except for the first column ( used to show department names ) have input fields with autocomplete attached (list of users) to it and. the list of users depend on the type of department.

So when a user clicks on an input field with Teaching Department as row data, all the users under teaching department would be populated under my autocomplete list, this information is coming in from my Database through a simple service

UserService.TS

getUsersByDepartmentId(departmentId: number, userName: string) {
      return this.http.get<User[]>(`apiUrl/${departmentId}/${userName}/getusers`);
}

new-component.ts

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger }) 
autoComplete: MatAutocompleteTrigger;

testData = [1,2,3,4,5,6];


getUsers(departmentId: number, userName: string) {
  this.userServive.getusersByDepartmentId(departmentId, userName)
  .subscribe(result => {
   this.filteredUsers = res;
 })  
}

checkOpen() {
console.log(this.autoComplete.panelOpen)
return this.autoComplete.panelOpen;
}

This is my HTML new-component.html

<ng-container *ngFor="let group of groups; let i = index" [matColumnDef]="group.name">
            <th  mat-header-cell 
                *matHeaderCellDef
                (mouseenter)="setGroupIndesxPosition(i)">
                    <div >
                        <h4>{{group.name | titlecase}} <span style="cursor: pointer" (click)="editGroup(group)" class="pull-right glyphicon glyphicon-pencil"></span></h4>
                    </div>
                    <div>
                        <span   cdkDropList
                        [cdkDropListData]="role"
                        (cdkDropListDropped)="addRoles($event, i)" *ngFor="let role of group.roles; let isLast=last" cdkDrag>{{role.id}}{{isLast ? '' : ', '}}</span> 
                    </div>
            </th>
            <td mat-cell *matCellDef="let row">
              <input id="userInput" #autoCompleteInput *ngIf="this.group.roles.length !== 0"
                placeholder="user Name"
                ngModel
                (ngModelChange)="getUser(row.id, $event)"
                [ngModelOptions]="{standalone: true}"
                [(ngModel)]="this.group.roles[findIndex(this.groups[i].roles, row.id)].user.name" 
                [matAutocomplete]="auto" 
                (focusout)="checkOpen() === false ? saveUser() : ''" 
                type="text">

                <input id="userInput"
                placeholder="Disabled, drag role to enable"
                *ngIf="this.group.roles.length === 0"
                [disabled]="this.group.roles.length === 0"
                  type="text" >
              <mat-autocomplete #auto="matAutocomplete">
                  <mat-option *ngFor="let user of filteredUsers" [value]="user.name">
                    {{user.name}}
                  </mat-option>
                </mat-autocomplete>
            </td>
        </ng-container>

The problem i have right now with matAutocompleteTrigger is that the checkOpen method returns true if the list is open and false if list is not showing in case i use testData in my autocomplete ngFor Loop.

If i use the data coming from my service for population autocomplete list, the checkOpen method always returns false even thought my list is open.

The reason i want to run the checkOpen methods is to run my saveUser method when the user focuses out of the input field( except for selection option from the autocomplete list )

Thankyou.

G. Tranter G. Tranter · Accepted Answer · 2019-07-30T14:04:05

The reason i want to run the checkOpen methods is to run my saveUser method when the user focuses out of the input field( except for selection option from the autocomplete list )

There is an easier way to do that:

<input (focusout)="saveUser()" ... >

saveUser() {
  setTimeout(() => {
    if (document.activeElement.tagName.toLowerCase() !== 'mat-option') {
      reallySaveUser();
    }
  });
)

MatAutocompleteTrigger does not work with response data

1 Answers