Skip to main content

Search and Top Navigation

#7665 closed bug (fixed)

Opened August 24, 2011 03:55PM UTC

Closed October 29, 2013 04:52PM UTC

Last modified April 22, 2014 03:27PM UTC

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

Reported by: larsch Owned by:
Priority: minor Milestone: 1.10.4
Component: ui.button Version: 1.8.14
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (25)

Changed October 10, 2011 09:58AM UTC by kungfu71186 comment:1

I can confirm this issue still exists.

Changed October 23, 2011 12:34AM UTC by Qwy comment:2

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.

Changed May 08, 2012 08:03PM UTC by scottgonzalez comment:3

#8305 is a duplicate of this ticket.

Changed September 06, 2012 12:03PM UTC by scottgonzalez comment:4

#8554 is a duplicate of this ticket.

Changed September 14, 2012 03:43PM UTC by Ult Combo comment:5

_comment0: You can also a [http://ultcombo.github.com/UltButtons/ plugin] that I developed to fix this and more until this bug gets fixed.1347662640036764

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

Changed October 11, 2012 02:43PM UTC by scottgonzalez comment:6

milestone: 1.9.01.11.0

Changed October 15, 2012 10:04PM UTC by bchiasson comment:7

status: newopen
summary: Radio button & checkboxes ignore mouseclicksButton: Radio button & checkboxes ignore mouseclicks for minor mouse movements

Changed October 16, 2012 02:10PM UTC by tj.vantoll comment:8

#8686 is a duplicate of this ticket.

Changed November 21, 2012 10:02PM UTC by Ult Combo comment:9

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.

Changed November 21, 2012 10:23PM UTC by mikesherov comment:10

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

Changed November 29, 2012 03:18AM UTC by Ult Combo comment:11

_comment0: 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. [http://jsfiddle.net/yrB8h/ 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.1354159224350930

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.

Changed November 29, 2012 04:03AM UTC by mikesherov comment:12

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!

Changed November 29, 2012 01:28PM UTC by scottgonzalez comment:13

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.

Changed November 29, 2012 10:08PM UTC by Ult Combo comment:14

_comment0: Thanks for the responses. \ \ IMO, as the Button widget styles checkbox and radio inputs 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). As for the disabled selection, I'm not sure whether this is fitting for the jQuery core so I'll leave it out for now.1354226958685110
_comment1: Thanks for the responses. \ \ IMO, as the Button widget styles checkbox and radio inputs 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). As for the disabled selection, I'm not sure whether this is fitting for the jQuery UI core so I'll leave it out for now.1354226995615569
_comment2: 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). As for the disabled selection, I'm not sure whether this is fitting for the jQuery UI core so I'll leave it out for now.1354227026526850
_comment3: 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 core so I'll leave it out for now.1354227204109757

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.

Changed November 29, 2012 11:58PM UTC by Ult Combo comment:15

Here's my PR with the proposed fix.

Changed March 23, 2013 02:01AM UTC by tj.vantoll comment:16

#9177 is a duplicate of this ticket.

Changed April 23, 2013 02:49PM UTC by petersendidit comment:17

#9246 is a duplicate of this ticket.

Changed October 29, 2013 02:22PM UTC by pixelwiz comment:18

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.

Changed October 29, 2013 02:56PM UTC by Ult Combo comment:19

@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

Changed October 29, 2013 04:52PM UTC by Fabrício Matté comment:20

resolution: → fixed
status: openclosed

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

Changeset: 8b64322e982e97cdfd5cdd184c8993f7123d469e

Changed November 26, 2013 08:54PM UTC by Fabrício Matté comment:21

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

Changed November 26, 2013 08:57PM UTC by scottgonzalez comment:22

milestone: 1.11.01.10.4

Changed April 22, 2014 01:54PM UTC by HikingMike comment:23

_comment0: 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. \ \ \ {{{ \ $("#flagColorRadioGroup").on("click", ".flagColorButton", function() { \ return saveFlag_colorButton(); \ }); \ }}} \ \ 1398177119331038

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

Changed April 22, 2014 03:04PM UTC by tj.vantoll comment:24

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.

Changed April 22, 2014 03:27PM UTC by HikingMike comment:25

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)