Ticket #7665 (closed bug: fixed)

Opened 3 years ago

Last modified 4 months ago

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:
Blocking: Blocked by:

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

Change History

comment:1 Changed 3 years ago by kungfu71186

I can confirm this issue still exists.

comment:2 Changed 3 years ago by 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.

comment:3 Changed 2 years ago by scott.gonzalez

#8305 is a duplicate of this ticket.

comment:4 Changed 2 years ago by scott.gonzalez

#8554 is a duplicate of this ticket.

comment:5 Changed 2 years ago by Ult Combo

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

Last edited 2 years ago by Ult Combo (previous) (diff)

comment:6 Changed 23 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.11.0

comment:7 Changed 23 months ago by bchiasson

  • Status changed from new to open
  • Summary changed from Radio button & checkboxes ignore mouseclicks to Button: Radio button & checkboxes ignore mouseclicks for minor mouse movements

comment:8 Changed 23 months ago by tj.vantoll

#8686 is a duplicate of this ticket.

comment:9 Changed 21 months ago by 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.

comment:10 Changed 21 months ago by 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 :-)

comment:11 Changed 21 months ago by 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.

Last edited 21 months ago by Ult Combo (previous) (diff)

comment:12 Changed 21 months ago by 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!

comment:13 Changed 21 months ago by 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.

comment:14 Changed 21 months ago by 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.

Last edited 21 months ago by Ult Combo (previous) (diff)

comment:15 Changed 21 months ago by Ult Combo

Here's my  PR with the proposed fix.

comment:16 Changed 17 months ago by tj.vantoll

#9177 is a duplicate of this ticket.

comment:17 Changed 16 months ago by petersendidit

#9246 is a duplicate of this ticket.

comment:18 Changed 10 months ago by 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.

comment:19 Changed 10 months ago by 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

comment:20 Changed 10 months ago by Fabrício Matté

  • Status changed from open to closed
  • Resolution set to fixed

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

Changeset: 8b64322e982e97cdfd5cdd184c8993f7123d469e

comment:21 Changed 9 months ago by 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

comment:22 Changed 9 months ago by scott.gonzalez

  • Milestone changed from 1.11.0 to 1.10.4

comment:23 follow-up: ↓ 24 Changed 4 months ago by 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();
});
Last edited 4 months ago by HikingMike (previous) (diff)

comment:24 in reply to: ↑ 23 ; follow-up: ↓ 25 Changed 4 months ago by 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.

comment:25 in reply to: ↑ 24 Changed 4 months ago by 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)

Note: See TracTickets for help on using tickets.