Как закрыть панель Mat-select, когда мышь находится вне коробки?

Question

Требование прямое, но почему-то мне не хватает основы c концепции использования mat-select API, я также выполнил несколько Ответов, но ни один из них не работает.

Требование : Как только я уберу мышь с панели, я смогу нажать кнопку Поиск.

Текущее поведение:

1. Мне нужно сделать два клика, чтобы закрыть панель.
2. Еще один, чтобы нажать кнопку Поиск.

Примечание: Кнопка поиска всегда включена.

Код для вышеуказанного выбора мата на изображении:

<div class="form-group">
     <mat-form-field class="full-width" >
         <mat-select   placeholder="Account Status"  
                       name="statusSelect"
                       #statusSelect="ngModel"
                       [(ngModel)]="advanceSearchFormData.statusSelect" 
                       multiple>
 <mat-select-trigger *ngIf="advanceSearchFormData.statusSelect?.length > 1" >
           Multiple
 </mat-select-trigger>
  <mat-option  *ngFor="let status of accountStatus" 
       [value]="status.accountStatus">
                  {{ status.accountStatus }}
   </mat-option>
   </mat-select>
   </mat-form-field>
   </div>

Answer 1

К счастью, MatSelect предоставляет ссылку на элемент панели, поэтому, когда он открыт, вы можете взять его и просто добавить прослушиватель событий для прослушивания mouseleave event:

this.matSelect.openedChange.subscribe(opened => {
  if (opened) {
    this.matSelect.panel.nativeElement.addEventListener('mouseleave', () => {
      this.matSelect.close();
    })
  }
})

И не забудьте удалить прослушиватель событий и отписаться.

DEMO

Answer 2

Я нашел ясное решение для этого случая:

   <mat-select #matmat placeholder="observers" [formControl]="observers"
                                [(value)]="selectedViewers" multiple> 
                                <div (mouseleave)="matmat.close()">
                                    <mat-option *ngFor="let user of allUsers" [value]="user">{{user.firstName}}
                                    </mat-option>
                                </div>
     </mat-select>