Skip to main content

Search and Top Navigation

#13169 closed bug (notabug)

Opened June 18, 2015 12:16PM UTC

Closed July 02, 2015 03:17PM UTC

Button: checkboxes first click not fired in Firefox 38

Reported by: shanesolo Owned by:
Priority: minor Milestone: none
Component: ui.button Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:
Description

I'm using the Button widget's buttonset function on a group of checkboxes.

As each input/label is clicked, I want to update the text in a <div> element.

However, with Firefox 38.0.5 and jqueryui 1.11.4, the <div>'s text is not updated on the first click, but the button appears checked (.ui-state-active). Upon a second click, the text gets updated but with the state from the first click.

Open this JSFiddle http://jsfiddle.net/9xe248mL/1/ in Firefox 38 to see.

This is not working in Firefox (version 38.0.5) with jqueryui 1.11.4.

It works in Chrome 43 and IE10, and if I revert jqueryui to 1.9.1, it works in Firefox 38 also.

Attachments (0)
Change History (3)

Changed June 18, 2015 01:58PM UTC by scottgonzalez comment:1

I'm not really sure this is a bug. You really care about when the checkboxes change value, not when they're clicked.

@arschmitz, what are your thoughts? Is this handled differently in the rewrite?

Changed June 19, 2015 10:46AM UTC by shanesolo comment:2

Replying to [comment:1 scott.gonzalez]:

I'm not really sure this is a bug. You really care about when the checkboxes change value, not when they're clicked. @arschmitz, what are your thoughts? Is this handled differently in the rewrite?

@scott.gonzalez you are correct. I was fixated on click(). Checkboxes change() is what I should bind to.

Just an observation, the handling of click() appears to have changed since jqueryui 1.10.0 (for Firefox only). I also reproduced this on Firefox 17.

Changed July 02, 2015 03:17PM UTC by arschmitz comment:3

_comment0: So this is a difference in the event order of firefox vs other browsers combined with arguably a bug in your example. \ Your code actually finds 2 click events because you get the one on the label and one on input which is generated by the user agent on the input. \ In most browsers the order is label click -> input change -> input click but in firefox it is label click -> input click -> input change \ \ What this means is that when you listen for click in firefox it is happening before the change event. The widget rightfully listens for the change event on the input for updating the style, so in firefox this has not happened yet when the click event occurs. I would also say you should be listening for the change event also, there are situations that can result in a click event with out an accompanying change event this would result in an inconsistent visual state. \ \ Im going to close this since the widget does not and should not handle the click event in any way.1435850387276089
resolution: → notabug
status: newclosed

So this is a difference in the event order of firefox vs other browsers combined with arguably a bug in your example.

Your code actually finds 2 click events because you get the one on the label and one on input which is generated by the user agent on the input.

In most browsers the order is label click -> input change -> input click but in firefox it is label click -> input click -> input change

you can see this in the jsbin here if you open in different browsers and click the label. This does not use jQuery UI at all.

http://jsbin.com/bipifo/1/edit?html,js,output

What this means is that when you listen for click in firefox it is happening before the change event. The widget rightfully listens for the change event on the input for updating the style, so in firefox this has not happened yet when the click event occurs. I would also say you should be listening for the change event also, there are situations that can result in a click event with out an accompanying change event this would result in an inconsistent visual state.

Im going to close this since the widget does not and should not handle the click event in any way.