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 González]

#8305 is a duplicate of this ticket.

[Scott González]

#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 González]

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.

[pixelwiz]

It's been 6 months since the last update. I'm still having this problem with jQuery v1.10.2 and jQuery UI v1.10.3. Clicks frequently don't register if mouse is moved even slightly.

[Ult Combo]

@pixelwiz, from what I've heard, the Button widget fixes were supposed to land on 1.11

Anyway, I've recently submitted a simpler fix than my last PR, would like it if anyone can review/comment/provide feedback: ​PR #1120

[Fabrício Matté]

Button: Remove obsolete mouse click coordinates checking. Fixed #7665 - Button: Radio button & checkboxes ignore mouseclicks for minor mouse movements.

Changeset: 8b64322e982e97cdfd5cdd184c8993f7123d469e

[Fabrício Matté]

Button: Remove obsolete mouse click coordinates checking. Fixed #7665 - Button: Radio button & checkboxes ignore mouseclicks for minor mouse movements. (cherry picked from commit 8b64322e982e97cdfd5cdd184c8993f7123d469e)

Changeset: 52e0f768f528e5265b6d7b4afae036b1ff248956

[HikingMike]

I am thankful for this fix, however I still have one issue. Now the radio button selects even if you drag the mouse a little, great, but the click event doesn't fire.

I have a couple sets of radio buttons in a dialog, and on the last set, my code sets the click event using the following code. The click is supposed to save changes and close a dialog. But if you do minor mouse movements now, it selects the button, but the dialog is not saved and closed. I will rework my code to make them just buttons (previously had a separate Save button, that's why these are radios), but this appears to be a defect to me, inconsistent with the intended behavior. EDIT- Ah nevermind, they have to be radio buttons because I need to show which one is currently selected. I'm stuck with the behavior currently.

$("#flagColorRadioGroup").on("click", ".flagColorButton", function() {
        return saveFlag_colorButton();
});

[tj.vantoll]

Replying to HikingMike:

I am thankful for this fix, however I still have one issue. Now the radio button selects even if you drag the mouse a little, great, but the click event doesn't fire.

I have a couple sets of radio buttons in a dialog, and on the last set, my code sets the click event using the following code. The click is supposed to save changes and close a dialog. But if you do minor mouse movements now, it selects the button, but the dialog is not saved and closed. I will rework my code to make them just buttons (previously had a separate Save button, that's why these are radios), but this appears to be a defect to me, inconsistent with the intended behavior. EDIT- Ah nevermind, they have to be radio buttons because I need to show which one is currently selected. I'm stuck with the behavior currently.

$("#flagColorRadioGroup").on("click", ".flagColorButton", function() {
        return saveFlag_colorButton();
});

Hi HIkingMike,

If you would like us to look into this please create a new ticket that includes a reduced test case that shows the problem. You can use this as a starting point for the test case: ​http://jsfiddle.net/tj_vantoll/RKwuk/. Thanks.

[HikingMike]

Replying to tj.vantoll:

Hi HIkingMike,

If you would like us to look into this please create a new ticket that includes a reduced test case that shows the problem. You can use this as a starting point for the test case: ​http://jsfiddle.net/tj_vantoll/RKwuk/. Thanks.

Hey thanks. Done - ​http://bugs.jqueryui.com/ticket/9990 (see second JSFiddle)