Изменение множественного выбора только после ухода мыши

Question

Можно ли вызвать изменение выбора только тогда, когда мышь покидает выпадающий список?Используя приведенный ниже пример, когда я использую «множественные» и пользовательские проверки для одной опции, я сразу же получаю событие изменения после каждого выбора.

<mat-form-field>
    <mat-select placeholder="Toppings" (change)=onChange($event) multiple>
      <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
    </mat-select>
</mat-form-field>

Кроме того, когда я использовал (selectionChange)="onChange($event)", то же самое поведение.Я также пытался прослушать optionSelectionChanges, на этот раз я получаю 2 события на выбор.

Мне нужно, чтобы пользователь мог сделать множественный выбор, но я буду слушать только после того, как он сделал все выборы (например, когдавыпадающий список закрывается после ухода мыши).

Answer 1

Если я правильно понимаю ваше требование:

Вы можете использовать (mouseover) и (mouseout)

<mat-form-field>
  <mat-select placeholder="Toppings" (mouseover)="onMouseMove(true)" (mouseout)="onMouseMove(false)" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

Код TS:

onMouseMove(event) {
    console.log(event)  // true false
    // if true then the mouse is on control and false when you leave the mouse
}

Пример StackBlitz

Answer 2

Вы можете привязаться к событию openedChange, которое срабатывает при переключении панели выбора:

<mat-form-field>
    <mat-select placeholder="Toppings"
        (openedChange)="panelChange($event)" multiple>
        <mat-option *ngFor="let topping of toppingList" [value]="topping"
            {{topping}}
        </mat-option>
    </mat-select>
</mat-form-field>

panelChange(panelOpen: boolean) {
    if (!panelOpen) {
        // Panel was closed - now handle the user's selected options
    }
}