Controlgroup: Fix issues with compatibility with spinner

Fixes #14966

tests/unit/controlgroup/common.js

@@ -3,7 +3,8 @@ define( [
 	"ui/widgets/controlgroup",
 	"ui/widgets/checkboxradio",
 	"ui/widgets/selectmenu",
-	"ui/widgets/button"
+	"ui/widgets/button",
+	"ui/widgets/spinner"
 ], function( common ) {
 
 common.testWidget( "controlgroup", {

tests/unit/controlgroup/core.js

@@ -4,7 +4,8 @@ define( [
 	"ui/widgets/controlgroup",
 	"ui/widgets/checkboxradio",
 	"ui/widgets/selectmenu",
-	"ui/widgets/button"
+	"ui/widgets/button",
+	"ui/widgets/spinner"
 ], function( QUnit, $ ) {
 
 QUnit.module( "Controlgroup: Core" );
@@ -75,11 +76,11 @@ QUnit.test( "selectmenu: controlgroupLabel", function( assert ) {
 } );
 
 var assertSanatized = function( assert, initClasses, expectedClasses, message ) {
-	var selectmenu = $( "#select-sanatize" ).selectmenu({
+	var selectmenu = $( "#select-sanatize" ).selectmenu( {
 		classes: {
 			"ui-selectmenu-button-open": initClasses
 		}
-	}).selectmenu( "instance" );
+	} ).selectmenu( "instance" );
 	var classes = {
 		"ui-selectmenu-button-open": "ui-corner-top"
 	};
@@ -87,7 +88,7 @@ var assertSanatized = function( assert, initClasses, expectedClasses, message )
 	assert.deepEqual( result, {
 		"ui-selectmenu-button-open": expectedClasses + " ui-corner-top"
 	}, message );
-}
+};
 
 QUnit.test( "_resolveClassesValues", function( assert ) {
 	assert.expect( 6 );

tests/unit/controlgroup/methods.js

@@ -4,7 +4,8 @@ define( [
 	"ui/widgets/controlgroup",
 	"ui/widgets/checkboxradio",
 	"ui/widgets/selectmenu",
-	"ui/widgets/button"
+	"ui/widgets/button",
+	"ui/widgets/spinner"
 ], function( QUnit, $ ) {
 
 QUnit.module( "Controlgroup: methods" );
@@ -13,6 +14,7 @@ QUnit.test( "destroy", function( assert ) {
 	assert.expect( 1 );
 	assert.domEqual( ".controlgroup", function() {
 		$( ".controlgroup" ).controlgroup().controlgroup( "destroy" );
+		$( "#spinner" ).addClass( "ui-spinner-input" );
 	} );
 } );
 
@@ -21,7 +23,7 @@ QUnit.test( "disable", function( assert ) {
 	var element = $( ".controlgroup" ).controlgroup().controlgroup( "disable" );
 	assert.lacksClasses( element, "ui-state-disabled",
 		"The widget does not get the disabled class, because we disable each child widget" );
-	assert.strictEqual( element.find( ".ui-state-disabled" ).length, 6,
+	assert.strictEqual( element.find( ".ui-state-disabled" ).length, 9,
 		"Child widgets are disabled" );
 } );
 
@@ -37,7 +39,8 @@ QUnit.test( "enable", function( assert ) {
 var tests = {
 		"checkboxradio": "<input type='checkbox'>",
 		"selectmenu": "<select><option>foo</option></select>",
-		"button": "<button>button text</button>"
+		"button": "<button>button text</button>",
+		"spinner": "<input class='ui-spinner-input'>"
 	},
 	orientations = {
 		"horizontal": [
@@ -63,7 +66,7 @@ $.each( tests, function( widget, html ) {
 		QUnit.test( "refresh: " + widget + ": " + name, function( assert ) {
 			assert.expect( 41 );
 
-			var i, control, currentClasses,
+			var i, control, label, currentClasses,
 				controls = [],
 				element = $( "<div>" ).controlgroup( {
 					direction: name
@@ -109,11 +112,11 @@ $.each( tests, function( widget, html ) {
 
 			// Add a label for each element and then append the element to the control group
 			for ( i = 0; i < 4; i++ ) {
-				control = $( html ).attr( "id", "id" + i )
+				control = $( html ).attr( "id", "id" + i );
-					.add( $( "<label>label text</label>" ).clone().attr( "for", "id" + i ) );
+				label = $( "<label>label text</label>" ).attr( "for", "id" + i );
 
 				controls.push( control );
-				element.append( control );
+				element.append( control, label );
 			}
 
 			// Refresh the controlgroup now that its populated
@@ -136,6 +139,9 @@ $.each( tests, function( widget, html ) {
 			iterateHidden();
 
 			// Disable the first control
+			if ( widget === "spinner" ) {
+				controls[ 0 ].spinner( "disable" );
+			}
 			controls[ 0 ].prop( "disabled", true );
 
 			element.controlgroup( "refresh" );
@@ -155,7 +161,7 @@ QUnit.test( "Child Classes Option: init", function( assert ) {
 			"ui-selectmenu-button-closed": "test-class"
 		}
 	} );
-	var controlgroup = $( ".controlgroup-pre" ).controlgroup();
+	$( ".controlgroup-pre" ).controlgroup();
 	assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" );
 } );
 

tests/unit/controlgroup/options.js

@@ -4,7 +4,8 @@ define( [
 	"ui/widgets/controlgroup",
 	"ui/widgets/checkboxradio",
 	"ui/widgets/selectmenu",
-	"ui/widgets/button"
+	"ui/widgets/button",
+	"ui/widgets/spinner"
 ], function( QUnit, $ ) {
 
 QUnit.module( "Controlgroup: options" );
@@ -13,7 +14,7 @@ QUnit.test( "disabled", function( assert ) {
 	assert.expect( 4 );
 	var element = $( ".controlgroup" ).controlgroup().controlgroup( "option", "disabled", true );
 	assert.lacksClasses( element, "ui-state-disabled" );
-	assert.equal( element.find( ".ui-state-disabled" ).length, 6, "Child widgets are disabled" );
+	assert.equal( element.find( ".ui-state-disabled" ).length, 9, "Child widgets are disabled" );
 
 	element.controlgroup( "option", "disabled", false );
 	assert.lacksClasses( element, "ui-state-disabled" );

ui/widgets/controlgroup.js

@@ -112,6 +112,11 @@ return $.widget( "ui.controlgroup", {
 				.each( function() {
 					var element = $( this );
 					var instance = element[ widget ]( "instance" );
+
+					// If the button is the child of a spinner ignore it
+					if ( widget === "button" && element.parent( ".ui-spinner" ).length ) {
+						return;
+					}
 					if ( instance ) {
 						options.classes = that._resolveClassesValues( options.classes, instance );
 					}
@@ -252,7 +257,6 @@ return $.widget( "ui.controlgroup", {
 
 				if ( instance && that[ "_" + instance.widgetName + "Options" ] ) {
 					var options = that[ "_" + instance.widgetName + "Options" ]( value );
-
 					options.classes = that._resolveClassesValues( options.classes, instance );
 					instance.element[ instance.widgetName ]( options );
 				} else {