Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(switch): fix switch drag functionality. #6715

Closed
wants to merge 1 commit into from
Closed

fix(switch): fix switch drag functionality. #6715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/checkbox/checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,9 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
}
}
function listener(ev) {
if (element[0].hasAttribute('disabled')) {
// skipToggle boolean is used by the switch directive to prevent the click event
// when releasing the drag. There will be always a click if releasing the drag over the checkbox
if (element[0].hasAttribute('disabled') || scope.skipToggle) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@EladBezalel Should I add a comment here to explain what skipToggle is used for?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes plz

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

return;
}

Expand Down
10 changes: 8 additions & 2 deletions src/components/switch/switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ angular.module('material.components.switch', [
*
* </hljs>
*/
function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdGesture) {
function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdGesture, $timeout) {
var checkboxDirective = mdCheckboxDirective[0];

return {
Expand Down Expand Up @@ -141,11 +141,17 @@ function MdSwitch(mdCheckboxDirective, $mdUtil, $mdConstant, $parse, $$rAF, $mdG

// We changed if there is no distance (this is a click a click),
// or if the drag distance is >50% of the total.
var isChanged = ngModel.$viewValue ? drag.translate > 0.5 : drag.translate < 0.5;
var isChanged = ngModel.$viewValue ? drag.translate < 0.5 : drag.translate > 0.5;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 noticed this too

if (isChanged) {
applyModelValue(!ngModel.$viewValue);
}
drag = null;

// Wait for incoming mouse click
scope.skipToggle = true;
$timeout(function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really don't like this, iv'e tried to fix this issue myself but also encountered the mouse click issue.
We shouldn't solve the problem, we should find the source..

Copy link
Member Author

@devversion devversion Jan 16, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, we are starting the mousedown and leaving the mouseup on the switch element, thats why a click got triggered after the drag got released over the switch.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yet, applying timeout here is just a hack. we should find a way to suspend clicks during drag and re-apply them when the drag ended

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There will be always the same way, to register an click event listener on the overlaying element. I think the more lightweight solution, is to use the current hack (I wont call it a hack - because the click is a default behavior of the browser) or we directly prevent the click from the drag service. Thoughts?

scope.skipToggle = false;
}, 1);
}

function applyModelValue(newValue) {
Expand Down
14 changes: 14 additions & 0 deletions src/components/switch/switch.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,18 @@ describe('<md-switch>', function() {
parentScope.$apply();
expect(element.attr('tabindex')).toEqual('-1');
});

it('should skip click event if releasing drag over element', function() {
var checkbox = $compile('<md-switch></md-switch>')(parentScope);
var scope = checkbox.scope();

// skipToggle is used here to imitate an ending drag, same behavior as in the component.
scope.skipToggle = true;
scope.$apply();

checkbox.triggerHandler('click');

expect(checkbox[0]).not.toHaveClass('md-checked');

});
});