fix(slide-toggle): invalid change events with no new value (#3555)

Currently the slide-toggle will always emit a change event on dragend.
This is not always correct, because the `checked` value only changes if 50% of the distance have been dragged.

Fixes #3526
This commit is contained in:
Paul Gschwendtner
2017-03-14 21:06:00 +01:00
committed by mmalerba
parent 0609e295a5
commit 5346353b4d
2 changed files with 21 additions and 1 deletions
+16
View File
@@ -563,6 +563,22 @@ describe('MdSlideToggle', () => {
expect(testComponent.lastEvent.checked).toBe(true);
}));
it('should not emit a change event when the value did not change', fakeAsync(() => {
expect(slideToggle.checked).toBe(false);
gestureConfig.emitEventForElement('slidestart', slideThumbContainer);
gestureConfig.emitEventForElement('slide', slideThumbContainer, { deltaX: 0 });
gestureConfig.emitEventForElement('slideend', slideThumbContainer);
// Flush the timeout for the slide ending.
tick();
expect(slideThumbContainer.classList).not.toContain('mat-dragging');
expect(slideToggle.checked).toBe(false);
expect(testComponent.lastEvent)
.toBeFalsy('Expected the slide-toggle to not emit a change event.');
}));
it('should update the checked property of the input', fakeAsync(() => {
expect(inputElement.checked).toBe(false);
+5 -1
View File
@@ -258,8 +258,12 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
_onDragEnd() {
if (this._slideRenderer.dragging) {
let _previousChecked = this.checked;
this.checked = this._slideRenderer.dragPercentage > 50;
this._emitChangeEvent();
if (_previousChecked !== this.checked) {
this._emitChangeEvent();
}
// The drag should be stopped outside of the current event handler, because otherwise the
// click event will be fired before and will revert the drag change.