Angular matAutocomplete не закрывается

Я практически не знаком с фронтендом, но нужно сделать функционал, поэтому прошу понять и простить. Проблема: При нажатии на input не закрывается matAutocomplete для другого input'a Html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ng-container>
  <h2 mat-dialog-title>
    {{ title }}
  </h2>

  <mat-form-field *ngFor="let department of companyPermissionInformation.departmentsList" class="chip-list"
                  appearance="fill">
    <mat-label>{{department}}</mat-label>
    <mat-chip-list #chipList aria-label="Permission selection">
      <mat-chip
        *ngFor="let companyPermission of companyPermissionInformation.companyDepartmentPermissionsMap.get(department)"
        (removed)="remove(department, companyPermission, trigger, chip)">
        {{companyPermission.permission | translate}}
        <mat-icon matChipRemove>cancel</mat-icon>
      </mat-chip>
      <input
        #chip
        #trigger="matAutocompleteTrigger"
        (click)="open($event, trigger,auto,chip)"
        [formControl]="formControl"
        [matAutocomplete]="auto"
        [matChipInputFor]="chipList"
      >
    </mat-chip-list>
    <mat-autocomplete #auto="matAutocomplete"
                      (optionSelected)="selected($event, department, chip)">
      <mat-option *ngFor="let permission of filteredPermission.get(department)">
        {{permission | translate}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <div mat-dialog-actions fxLayoutAlign='end'>
    <button mat-button [mat-dialog-close]='null'>
      {{ 'cancel' | translate }}
    </button>

    <button
      #saveButton
      mat-raised-button
      color='primary'
      (click)='save()'
    >
      {{ 'save' | translate }}
    </button>
  </div>
</ng-container>

ts

 remove(department: string, permission: DepartmentPermission, trigger: MatAutocompleteTrigger, chip: HTMLInputElement): void {
    chip.value = "";
    trigger.closePanel();
    const index = this.companyPermissionInformation.companyDepartmentPermissionsMap.get(department).indexOf(permission);
    if (index >= 0) {
      this.companyPermissionInformation.companyDepartmentPermissionsMap.get(department).splice(index, 1);
    }
    this.input.nativeElement.value = '';
    this.formControl.setValue(null);
    this.filteredPermission.get(department).push(permission.permission);
  }

  selected(event: MatAutocompleteSelectedEvent, department: string, chip: HTMLInputElement): void {
    chip.value = "";
    let newPermission: DepartmentPermission = new DepartmentPermission();
    let permissionName = this.mapper(event.option.viewValue);
    newPermission.id = null;
    newPermission.permission = permissionName;
    this.companyPermissionInformation.companyDepartmentPermissionsMap.get(department).push(newPermission);
    this.input.nativeElement.value = '';
    this.formControl.setValue(null);
    const index = this.filteredPermission.get(department).indexOf(permissionName);
    this.filteredPermission.get(department).splice(index, 1);
    if (this.filteredPermission.get(department).length == 0) {
      chip.value = '';
    }
  }

 

  open(event: MouseEvent, trigger: MatAutocompleteTrigger, auto: MatAutocomplete, chip: HTMLInputElement) {
    event.stopPropagation();
    trigger.openPanel();
  }

Что пробовал: Закрывать по событиями (blur,focusout), но тогда не срабатывает функия selected, так как при выборе так же теряется фокус При нажатии на другой div с формой matAutocomplete закрывается, при нажатии на input нет Буду очень благодарен за любую помощь