Jquery UI toggle button (checkbox) click/drag bug

Question

I'm posting this along with the best answer I have come up with. I haven't found any similar questions, so here goes.

When a input of type checkbox is converted to a jquery ui button, I have observed (as have others) that it only registers a click if the mouse is kept completely still while clicking. Any movement what-so-ever and nothing happens. To the user this can only be perceived as flaky and unreliable behavior.

How do others work around this behavior (observed with jquery 1.6.3/jquery ui 1.8.16 in chrome 14 and ie 8)? Is there something obvious I am missing since I have to go to such lengths to get the expected behavior?

Jerome

I'd suggest either of these solutions as well: ultcombo.github.io/UltButtons or https://mcmap.net/q/1469135/-jquery-ui-buttonset-buttons-don-39-t-always-work-on-first-click – Parsonage

Answer 1

I got the idea for this workaround from an issue report on the jquery ui page linked to above, but it needed a bit of work: jsfiddle

I attach a click listener on the label and handle the state change myself. I also found it necessary to prevent text selection on the toggle button. This is done with css (found that elsewhere on SO)

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;   
}

Maybe this can save the next person that wants to use the jquery ui toggle button some time and grief. If anybody has a better/cleaner solution, I am very interested!

Jerome

Interesting. There have been a few bug reports as well. There is another one that opened: bugs.jqueryui.com/ticket/7665 This is good to know though. – Sauls

good idea, but it doesn't work when you add the class from script and then use .on("click") to handle click event – Wee

I was using this solution but came across a case with dynamnic elements. The solution to this similar question works rather well. https://mcmap.net/q/1469135/-jquery-ui-buttonset-buttons-don-39-t-always-work-on-first-click – Parsonage

Please see mikato's answer. It appears that jquery 1.10.4 includes some improvements regarding this issue. – Jerome

Answer 2

Old question, but I just thought I'd post this since I had the same question and made my way here --- Judging by the behavior of the jQuery UI buttons demonstrated in the demo here http://jqueryui.com/button/#radio using Firefox, it seems to have been fixed in v1.10.4. Here is the bug ticket - http://bugs.jqueryui.com/ticket/7665. And here is the changelog for v1.10.4 - http://jqueryui.com/changelog/1.10.4/

Fixed: Radio button & checkboxes ignore mouseclicks for minor mouse movements. (#7665, 52e0f76)

There is still a question of it not firing the click event though.

Destalinization

Answer 3

Actually, there is a bug in 1.8.13 and previous versions. If you click on a button and move/drag your cursor, then a button visually gets a selected state, but the underlying checkbox/radio is not selected. As a consequence, the form data sent to the server is inconsistent with what the user sees.

From version 1.8.14 this bug is solved. The downside is that you have to keep your mouse still. Keep that in mind, if you decide to use older version of jquery-ui.

Prat

And does somebody know why is this happening? I tried to use unselectable class by adding it to UI code, but it didn't hlep. – Wee

Answer 4

I know this is a really old question, and has since been fixed, but I found this to be the only fix that worked for me:

http://ultcombo.github.com/UltButtons/

Hopefully jQuery will fix the actual issue soon.

Wolff

Answer 5

I have a similar situation using the bootstrap framework, and the solution I found is not pretty at all, but it does do the trick for me.

I have to manually add to every involved element the following code:

.on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false })

Examples: In JavaScript, when I use jquery to add buttons into a dialog box:

.append($(document.createElement('a'))
    .attr({'class': 'btn', 'href': '#'})
    .append($(document.createTextNode('1')))
    .on('mousedown', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false })
)

or inline in HTML:

<a class="btn" href="#" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" onclick="UseButton(this); return false;" >1</a>

I tried adding it with jQuery after the buttons were created:

.on('mousedown', 'a.btn', function(ev) { ev.preventDefault [...] } )

but it just doesn't work - it apparently has to be added directly to the element.

As I said, not pretty, but at least in Firefox it works like a charm.

Benedictus

Answer 6

I just came across this as well. It seems as though even though this may be fixed in Jquery UI with some browsers, it still fails in Firefox. From what I've seen, if you click the button while moving the mouse, the button color changes, but the actual value of "input" never changes. So you can't use a "Change" event, but instead must use a "Click" event, and see if it actually changes. What I've done is include a refresh right when the click event occurs. Therefore if the input value is different than the button, it looks to the user as they've never clicked it.

$(function() { $( "#myButtonSet" ).buttonset(); });
$('#myButtonSet').on('click',function(){
      //This will reset the button back to it's original state if the input does not 
      //match what the user clicked. It is so fast that it seems to the user they never 
      //clicked the button at all, prompting them to do it again.
    $("input[name='myButtonSetName']").button("refresh"); 
});

Holoenzyme