Stop event propagation for mat-select inside mat-checkbox

I have a <mat-select> inside a <mat-checkbox>. When there is a change on <mat-select>, it also toggles the <mat-checkbox> and I do not want this to happen.

I have tried using '$event.stopPropagation()' but it doesn't work. Any ideas how this could be tackled?

<mat-checkbox [(ngModel)]="myCheckboxModel" (change)="onChangeFunction()">
<mat-form-field>
<mat-select [(ngModel)]="mySelectModel">
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
</mat-select>
</mat-form-field>
</mat-checkbox>

Continue reading...