Button: Radio button & checkboxes ignore mouseclicks for minor mouse movements

[larsch]

Between 1.6.13 and 1.6.14, a guard was added to radio button and checkboxes that causes them to ignore clicks if the mouse is moved between pressing and releasing the button (ticket #6970, change  https://github.com/eikes/jquery-ui/commit/16ecdccc4bd59e7f03b8fc033eb3b9f1130aad2c). This violates usability on platforms that normally tolerate a few pixels of mouse movements between pressing and releasing, while still counting it as a click, not a drag.

On Windows, in both Chrome and Firefox, the default behaviour is to not count it as "dragging" before the mouse has moved at least 4 pixels. Anything less, and it's still a click. jquery-ui-1.8.14 and forward breaks this behaviour.

IMHO, it's a rather severe usability issue to break click-drag tolerance.

Can be reproduced in any demo of radiobuttons and checkboxes.

1. Hover mouse over checkbox
2. Press left mouse button
3. Move mouse one pixel
4. Release mouse button

[kungfu71186]

I can confirm this issue still exists.

[Qwy]

This problem is affecting a lot of us. I found it really confusing, until I read this:  http://stackoverflow.com/questions/7687480/jquery-ui-toggle-button-checkbox-click-drag-bug

Such button behavior is... pretty obnoxious.

[scott.gonzalez]

#8305 is a duplicate of this ticket.

[scott.gonzalez]

#8554 is a duplicate of this ticket.

[Ult Combo]

You can also use a  plugin that I developed to fix this and more until this bug gets fixed.

[bchiasson]

 http://jsfiddle.net/bchiasson/Lfx8J/3/

[tj.vantoll]

#8686 is a duplicate of this ticket.

[Ult Combo]

Milestone to 1.11? Is it that hard to fix? IMO it is a big usability issue as well. I will try my hand at it when I have more time and make a pull request if I have luck.

[mikesherov]

Ult Combo, all button fixes are by default wholesale assigned to 1.11. I'll gladly land a pull request if you got it with unit tests :-)

[Ult Combo]

Did some work on this, and after removing the lines from #6970's bug fix which are now unnecessary with the #5518 fix, you can drag a satisfactory amount of pixels in Chrome while clicking.

The problem is Firefox, as we're using a label element to forward/proxy the clicks to the input elements, Firefox's behavior will not toggle a checkbox if the mouse is moved more than 2-4px while clicking on a label.  Demonstration.

Not sure whether we can leave it like that or simulate the click with mousedown/mouseup handlers to attain a sturdy cross-browser behavior. The issue with using mousedown/mouseup handlers then would be:

1. Native handlers (added through addEventListener/attachEvent) will not fire for triggered events .change()/.click() - these do currently fire as the labels proxy the native click event to the input.
2. It'd require extra code to identify whether the mousedown-mouseup sequence already triggered an actual click event or if we have to simulate it.

Not sure which path to take. Triggering the handlers will provide better usability for FF users but will not be consistent with other libraries/native event handlers.

[mikesherov]

jQuery makes no promise to work with native event handlers. If you're using jquery, we only support using jquery events. Go down that road if you need to. Thanks again!

[scott.gonzalez]

Ult Combo: I'm not sure there's any way we can get the native click to work in Firefox for long drags anyway. I think Firefox actually does this for usability so that you can select the text of a label without toggling the associated field. Firefox does allow longer drags on the checkbox itself. I think handling mousedown, mouseup, and click to determine if we need to trigger a synthetic click is fine. There's some code in jquery.ui.mouse.js that does this, but it might be a bit complicated because of the generic nature of mouse. Anyway, it might be worth looking at for comparison.

Thanks for investigating this.

[Ult Combo]

Thanks for the responses.

IMO, as the Button widget styles checkbox and radio inputs' labels to look like buttons, it'd be logical for these to behave like buttons (e.g. allowing long drags).

In the temporary fix in the form of plugin which I've linked 3 months ago, I've also disabled user selection on the label, so the behavior is very close to a button's.

I'll submit a PR with this usability issue fixed (allowing longer clicks) soon. As for the disabled selection, I'm not sure whether this is fitting for the jQuery UI button widget so I'll leave it out for now.

[Ult Combo]

Here's my  PR with the proposed fix.

[tj.vantoll]

#9177 is a duplicate of this ticket.

[petersendidit]

#9246 is a duplicate of this ticket.