diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts index 3c360b656ec4..b95bf06c96e3 100644 --- a/src/lib/slide-toggle/slide-toggle.spec.ts +++ b/src/lib/slide-toggle/slide-toggle.spec.ts @@ -475,6 +475,29 @@ describe('MatSlideToggle without forms', () => { .toBeFalsy('Expected the slide-toggle to not emit a change event.'); })); + it('should ignore clicks on the label element while dragging', fakeAsync(() => { + expect(slideToggle.checked).toBe(false); + + gestureConfig.emitEventForElement('slidestart', slideThumbContainer); + gestureConfig.emitEventForElement('slide', slideThumbContainer, { + deltaX: 200 // Arbitrary, large delta that will be clamped to the end of the slide-toggle. + }); + gestureConfig.emitEventForElement('slideend', slideThumbContainer); + + expect(slideToggle.checked).toBe(true); + + // Fake a change event that has been fired after dragging through the click on pointer + // release (noticeable on IE11, Edge) + inputElement.checked = false; + dispatchFakeEvent(inputElement, 'change'); + + // Flush the timeout for the slide ending. + tick(); + + expect(slideThumbContainer.classList).not.toContain('mat-dragging'); + expect(slideToggle.checked).toBe(true); + })); + it('should update the checked property of the input', fakeAsync(() => { expect(inputElement.checked).toBe(false); diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 7d0110bbde97..786e3227af3d 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -161,32 +161,31 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro this._focusMonitor.stopMonitoring(this._inputElement.nativeElement); } - /** - * This function will called if the underlying input changed its value through user interaction. - */ + /** Method being called whenever the underlying input emits a change event. */ _onChangeEvent(event: Event) { // We always have to stop propagation on the change event. // Otherwise the change event, from the input element, will bubble up and // emit its event object to the component's `change` output. event.stopPropagation(); - // Sync the value from the underlying input element with the slide-toggle component. + // Releasing the pointer over the `