#12554 closed bug (duplicate)

Opened May 12, 2015 05:50AM UTC

Closed May 12, 2015 11:41AM UTC

The return value of prop("checked") can become different from what we expect by looking.

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

How to reproduce the problem

After pressing the mouse on a radio button, then slightly move and release, the return value of prop("checked") becomes different from what we expect by looking.

Here is the HTML to reproduce it.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button - Radios</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
	<script>
	$(function() {
		$( "#radio" ).buttonset();
		$( "#list" ).click(function() {
			$( "body" ).append("Choice 1: " + $( "#radio1" ).prop("checked") +
							", Choice 2: " + $( "#radio2" ).prop("checked") +
							", Choice 3: "  + $( "#radio3" ).prop("checked") + "<br/>");
		});
	});
	</script>
</head>
<body>
<form>
	<div id="radio">
		<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
		<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
		<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
	</div>
	<button type="button" id="list">List</button><br/>
</form>
</body>
</html>

After the HTML shows, click "List" button.

"Choice 1: false, Choice 2: true, Choice 3: false" is displayed.

And press a mouse on "Choice 1" then move slightly and release then click "List" button again.

Still "Choice 1: false, Choice 2: true, Choice 3: false" is displayed though "Choice 1" looks selected.

The expected behavior is that "Choice 2" looks selected because prop("checked") of "Choice 2" return true.

I checked the behavior of jQuery UI 1.11.4 on Chrome 42.0.2311.135 m and Firefox 37.0.2 on Windows 7 Professional.

jQuery UI 1.10.4 also has the same problem.

Why it happens

click event handler for radio in jQuery UI Button is below.

			this.buttonElement.bind( "click" + this.eventNamespace, function() {
				if ( options.disabled ) {
					return false;
				}
				$( this ).addClass( "ui-state-active" );
				that.buttonElement.attr( "aria-pressed", "true" );

				var radio = that.element[ 0 ];
				radioGroup( radio )
					.not( radio )
					.map(function() {
						return $( this ).button( "widget" )[ 0 ];
					})
					.removeClass( "ui-state-active" )
					.attr( "aria-pressed", "false" );
			});

change event handler for radio in jQuery UI Button is below.

			this.element.bind( "change" + this.eventNamespace, function() {
				that.refresh();
			});

The part for radio in refresh in jQuery UI Button is below.

			radioGroup( this.element[0] ).each(function() {
				if ( $( this ).is( ":checked" ) ) {
					$( this ).button( "widget" )
						.addClass( "ui-state-active" )
						.attr( "aria-pressed", "true" );
				} else {
					$( this ).button( "widget" )
						.removeClass( "ui-state-active" )
						.attr( "aria-pressed", "false" );
				}
			});

If we click normally, the return values of prop("checked") change.

And click event is raised then change event is raised.

So there is no problem.

But if we press a mouse then move slightly and release, the return values of prop("checked") don't change.

And only click event is raised.

But click event handler adds the class "ui-state-active" to the clicked button and removes the class from to the other buttons.

How to fix

I think the class "ui-state-active" should be controlled only when change event is raised.

So I think the below code is enough as the click event handler .

			this.buttonElement.bind( "click" + this.eventNamespace, function() {
				if ( options.disabled ) {
					return false;
				}
			});
Attachments (0)
Change History (1)

Changed May 12, 2015 11:41AM UTC by scottgonzalez comment:1

resolution: → duplicate
status: new → closed

Duplicate of #9990.