0

A mat-select inside a mat-checkbox label is tricky: if I click the mat-select, the checkbox is also toggled. I don't want this to happen...

I have tried taking the select out of the checkbox, but then it is hard to display the two nicely on one line. I have also replace the mat-select with a select. This works, but is less perfect. (e.g., if I want to do multiple selections).

Here is a working example: https://angular-7em9xn.stackblitz.io

with code: https://stackblitz.com/edit/angular-7em9xn

Matthew
  • 69
  • 6
  • Possible duplicate of [Stop mouse event propagation](https://stackoverflow.com/questions/35274028/stop-mouse-event-propagation) – Bojan Kogoj Mar 22 '19 at 23:20

1 Answers1

0

Add a directive (click-stop-propagation.directive.ts)

@Directive({
  selector: '[appClickStopPropagation]',
})
export class ClickStopPropagationDirective {
  @HostListener('click', ['$event'])
  public onClick(event: any): void {
    event.stopPropagation();
    event.preventDefault();
  }
}

And use it on mat-select

<mat-checkbox>Check this out! 
  <mat-select [(ngModel)]='when' appClickStopPropagation>
    <mat-option value="now">now</mat-option>
    <mat-option value="later">later</mat-option>
  </mat-select>
</mat-checkbox>

While event.stopPropagation(); should be enough for some reason it wasn't.

Bojan Kogoj
  • 5,321
  • 3
  • 35
  • 57
  • Thanks! I have tried to implement your suggestion here: https://angular-7em9xn-fxehqr.stackblitz.io but it still doesn't behave. – Matthew Mar 23 '19 at 23:02