CODEWITHSUNDEEP
angular-material
iPhoneJavaDev
iPhoneJavaDev

Reputation: 825

Multiple selection change only after mouse leave

Is it possible to trigger the selection change only when mouse leaves the select dropdown? Using the example below, when I use "multiple" and user checks on one option, I immediately get the change event after each selection.

<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>

Also, when I used (selectionChange)="onChange($event)", the same behavior. I also tried to listen to optionSelectionChanges, this time around I get 2 events per selection.

What I need is user can do multiple selection, but I will only listen after he made all the selections (like when the select dropdown closes after mouse leave).

Upvotes: 0

Views: 2375

Answers (2)

Prashant Pimpale
Prashant Pimpale

Reputation: 10707

If I understand your requirement correctly:

You can use (mouseover) and (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 code:

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

StackBlitz Example

Upvotes: 1

codequiet
codequiet

Reputation: 1242

You could bind to the openedChange event that fires when the select panel toggles:

<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
    }
}

Upvotes: 3

Related Questions