md-switch bounces back when dragged

[metamatt]

The following happens on the demo page and also in my own code. I'm using Chrome 44 on Mac OS X, Angular Material 0.10.1 and 0.11.

If I just click on the switch, it toggles to the other position.

If I click and hold and drag the switch from off to on, then release the mouse, the switch bounces back to off.

(But dragging the switch from on to off works; also, if I drag the switch from off to on then while continuing to hold the mouse button down, move the mouse outside the md-switch element's bounding box, THEN release the mouse button, the switch does not bounce back to off.)

However, of all these, the one that I find the most natural behavior is just dragging it from off to on and that's the one that doesn't work.

[DallanQ]

+1 for this. Just walked through my prototype app with two users today and both of them tried to drag the switch to turn it on. I've always clicked, but dragging seems to be popular.

[barryvdh]

I'm also having this issue. Dragging kinda works, but not when you drag it all the way left (or beyond), which is natural.

This is happening on v1.0.0 still, on the demo page (Chrome, windows) https://material.angularjs.org/latest/demo/switch

[gpittarelli]

I've verified this issue is still happening on the current master 8ef798f. Here are two examples of this issue, with the switch toggling one way despite being dragged in the opposite direction:

(also note that when attempting to drag the slider past its maximum bounds, the cursor doesn't stay properly styled)

I tracked the issue down to happening when the drag ends outside of the switch element, because of some unintuitive interactions between the switch's click listener (reused from md-checkbox) and the switch's own dragend handler.

This also causes the likely-a-bug behavior that, if you drag the slider slightly (but not enough for it to latch to the other side when you release), though the switch visually isn't toggled, it is in fact being quickly toggled twice (for example, $watches on the md-switch's ng-model will be called twice).

I'll submit a PR soon with a fix.

[devversion]

Related to #2338 and UX should be clearly improved in #6715