#7856 closed bug (notabug)

Opened November 09, 2011 01:27PM UTC

Closed November 09, 2011 01:38PM UTC

Last modified March 19, 2012 01:57PM UTC

buttonset() Buttons remain highlighted after being 'unchecked'

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

From jQueryUI version 1.8.14 onwards there appears to have been a change to checkbox buttonset handling within the ui.button component. In 1.8.x releases up to and including 1.8.13 when a button is 'unchecked' and the mouse is moved so that it is no longer hovering over the 'unchecked' button, the highlighting on the button changes correctly to indicate that it is now in its 'unchecked' state. However from version 1.8.14 onwards, certain browsers (see below), no longer behave as expected. Instead, when a 'checked' button within the buttonset is 'unchecked', it remains highlighted even when the mouse is no longer hovering over it - clicking on another button in the buttonset (or simply clicking anywhere outside the 'unchecked' button) causes the styling of the originally unchecked button to change to the expected state (perhaps as a result of no longer having focus).

The described behavior can be observed here:

http://jsfiddle.net/nAnf7/

This is a reduced version of the buttonset() demo from jQueryUI.com - by default it is configured to use 1.8.13 - which should work correctly in all tested browsers. Updating the script/css URL's to use 1.8.14 and re-running shows the unexpected behavior.

This behavior has been observed in the following browsers (others may be affected also) with versions of jQueryUI from 1.8.14 onwards (all tested browsers appear to behave as expected with versions 1.8.13 and earlier):

Mozilla Firefox 7.01/8.0

Opera

Internet Explorer 9

Unaffected:

Google Chrome 15.0.874.106

Apple Safari 5.1.1

Attachments (0)
Change History (6)

Changed November 09, 2011 01:38PM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

What's actually happening is the button remains focused. Try pressing tab after you uncheck the checkbox. The opposite of what you're reporting may actually be a bug.

Changed November 09, 2011 02:25PM UTC by ShaneK comment:2

Scott,

Thanks for your response, however I'm not sure I follow. I understand that the checkbox 'button' remains focused after 'unchecking' in certain browsers (Firefox/Opera/IE). But *should* it? I would expect that after 'unchecking' the button and moving the mouse cursor away from it that it would automatically lose its focus and the styling would be updated to reflect its 'unchecked' state - this is how it appears to have worked in browsers prior to 1.8.14.

In any case, the behavior (whatever it should be) is no longer consistent across browsers - and surely that can't be right?

Regards,

Shane

Changed November 21, 2011 12:30AM UTC by nuxwin comment:3

_comment0: Please, reopen this ticket. The current behavior is bad. When a checkbox is unchecked, it must lose the focus when we move the mouse outside it. The current behavior is really annoying. → 1321836658535952
_comment1: Please, reopen this ticket. The current behavior is bad. When a checkbox is unchecked, it must lose the focus when we move the mouse outside it. The current behavior is really annoying. \ \ \ Easy fix for now: \ \ {{{ \ $('#checkboxes').buttonset(); \ \ // Here the fix \ $('[type=checkbox]').change(function() {$(this).blur();}); \ }}} → 1321837082657645
_comment2: Please, reopen this ticket. The current behavior is bad. When a checkbox is unchecked, it must lose the focus when we move the mouse outside it. The current behavior is really annoying. \ \ \ Easy fix for now: \ \ {{{ \ <script type="text/javascript"> \ /*<![CDATA[*/ \ $(document).ready(function() { \ $('.ui-buttonset').buttonset(); \ // Fix for http://bugs.jqueryui.com/ticket/7856 \ $('[type=checkbox]').change(function() { \ if(!$(this).is(':checked')) { \ $(this).blur(); \ } \ }); \ }); \ /*]]>*/ \ </script> \ }}} → 1321837155937677

Please, reopen this ticket. The current behavior is bad. When a checkbox is unchecked, it must lose the focus when we move the mouse outside it. The current behavior is really annoying.

Easy fix for now:

<script type="text/javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		$('#checkboxes').buttonset();
		// Fix for http://bugs.jqueryui.com/ticket/7856
		$('[type=checkbox]').change(function() {
			if(!$(this).is(':checked')) {
				$(this).blur();
			}
		});
	});
/*]]>*/
</script>

Changed November 21, 2011 01:27PM UTC by scottgonzalez comment:4

Filed a new bug with the correct description: #7902.

Changed March 08, 2012 01:54PM UTC by sergio comment:5

I agree with nuxwin. This ticket should be reopened because the bug is still there in 1.8.18 and it is even worse when the checkbox is inside a container you have made "sortable":

$("container").sortable();
$("container .checkboxes").button();

The checkbox remains highlighted even if you click something else inside that container (even other buttons) and the fact that behavior is not the same in Webkit browsers tell us that something is definitely wrong here.

Changed March 19, 2012 01:57PM UTC by scottgonzalez comment:6

@nuxwin @sergio Have either of you actually read the comments above? We're not doing anything special, this is the built-in behavior of the browser. There's a separate ticket to track the fact that different browsers have different behavior.