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

I can confirm this issue still exists.

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.

#8305 is a duplicate of this ticket.

#8554 is a duplicate of this ticket.

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

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

#8686 is a duplicate of this ticket.

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.

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 :-)

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.

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!

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.

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.

Here's my PR with the proposed fix.

#9177 is a duplicate of this ticket.

#9246 is a duplicate of this ticket.

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.

@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

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

Changeset: 8b64322e982e97cdfd5cdd184c8993f7123d469e

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

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();
});

Replying to [comment:23 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.

Replying to [comment:24 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)