diff --git a/src/material-experimental/mdc-checkbox/checkbox.html b/src/material-experimental/mdc-checkbox/checkbox.html index 1f8fb9d66f40..303eb8fc6ddd 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.html +++ b/src/material-experimental/mdc-checkbox/checkbox.html @@ -1,5 +1,6 @@
+ [class.mdc-form-field--align-end]="labelPosition == 'before'" + (click)="_preventBubblingFromLabel($event)">
@@ -38,9 +39,13 @@ [matRippleDisabled]="disableRipple || disabled" [matRippleCentered]="true">
+ diff --git a/src/material-experimental/mdc-checkbox/checkbox.spec.ts b/src/material-experimental/mdc-checkbox/checkbox.spec.ts index 0e4861a25df6..d3c09398eeb7 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.spec.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.spec.ts @@ -309,7 +309,20 @@ describe('MDC-based MatCheckbox', () => { ); })); - it('should not trigger the click event multiple times', fakeAsync(() => { + it('should trigger the click once when clicking on the ', fakeAsync(() => { + spyOn(testComponent, 'onCheckboxClick'); + + expect(inputElement.checked).toBe(false); + + inputElement.click(); + fixture.detectChanges(); + flush(); + + expect(inputElement.checked).toBe(true); + expect(testComponent.onCheckboxClick).toHaveBeenCalledTimes(1); + })); + + it('should trigger the click event once when clicking on the label', fakeAsync(() => { // By default, when clicking on a label element, a generated click will be dispatched // on the associated input element. // Since we're using a label element and a visual hidden input, this behavior can led @@ -1037,7 +1050,7 @@ describe('MatCheckboxDefaultOptions', () => { /** Simple component for testing a single checkbox. */ @Component({ template: ` -
+
{ [color]="checkboxColor" [disableRipple]="disableRipple" [value]="checkboxValue" - (click)="onCheckboxClick($event)" (change)="onCheckboxChange($event)"> Simple checkbox diff --git a/src/material-experimental/mdc-checkbox/checkbox.ts b/src/material-experimental/mdc-checkbox/checkbox.ts index 7005098f9528..8454b5893a92 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.ts @@ -116,4 +116,17 @@ export class MatCheckbox _onInputClick() { super._handleInputClick(); } + + /** + * Prevent click events that come from the `