Controlgroup: Correctly handle non-empty child class key

Fixes #14984
Closes gh-1713

Author: Gabriel Schulhof

tests/unit/controlgroup/controlgroup.html

@@ -68,6 +68,22 @@
 	<div class="controlgroup-single-button">
 		<button class="single-button">button</button>
 	</div>
+	<div class="controlgroup-non-empty-class-key-init">
+		<select id="non-empty-class-key-init-child">
+			<option>Option 1</option>
+			<option>Option 2</option>
+		</select>
+	</div>
+	<div class="controlgroup-non-empty-class-key-value-no-dupe">
+		<select id="non-empty-class-key-value-no-dupe-first">
+			<option>Option 1</option>
+			<option>Option 2</option>
+		</select>
+		<select id="non-empty-class-key-value-no-dupe-second">
+			<option>Option 1</option>
+			<option>Option 2</option>
+		</select>
+	</div>
 </div>
 </body>
 </html>

tests/unit/controlgroup/core.js

@@ -160,4 +160,42 @@ QUnit.test( "Single controlgroup button - vertical", function( assert ) {
 		" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
 } );
 
+QUnit.module( "Controlgroup: Non-empty class key", {
+	setup: function() {
+		this.classKey = $.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ];
+		$.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ] =
+			$.trim( $.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ] +
+				" something-custom" );
+	},
+	teardown: function() {
+		$.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ] = this.classKey;
+	}
+} );
+
+QUnit.test( "Controlgroup instantiates child widgets with correct options", function( assert ) {
+	assert.expect( 1 );
+
+	$( ".controlgroup-non-empty-class-key-init" ).controlgroup();
+
+	assert.hasClasses( $( "#non-empty-class-key-init-child" ).next(), "something-custom" );
+} );
+
+QUnit.test( "Controlgroup correctly assigns child widget classes options key", function( assert ) {
+	assert.expect( 2 );
+
+	$( ".controlgroup-non-empty-class-key-value-no-dupe" ).controlgroup();
+
+	assert.strictEqual(
+		( $( "#non-empty-class-key-value-no-dupe-first" )
+			.selectmenu( "option", "classes" )[ "ui-selectmenu-button-closed" ]
+			.match( /something-custom/g ) || [] ).length, 1,
+		"Class 'something-custom' appears exactly once in the first widget's class key value" );
+
+	assert.strictEqual(
+		( $( "#non-empty-class-key-value-no-dupe-second" )
+			.selectmenu( "option", "classes" )[ "ui-selectmenu-button-closed" ]
+			.match( /something-custom/g ) || [] ).length, 1,
+		"Class 'something-custom' appears exactly once in the second widget's class key value" );
+} );
+
 } );

ui/widgets/controlgroup.js

@@ -118,14 +118,24 @@ return $.widget( "ui.controlgroup", {
 					var element = $( this );
 					var instance = element[ widget ]( "instance" );
 
+					// We need to clone the default options for this type of widget to avoid
+					// polluting the variable options which has a wider scope than a single widget.
+					var instanceOptions = $.widget.extend( {}, options );
+
 					// If the button is the child of a spinner ignore it
 					if ( widget === "button" && element.parent( ".ui-spinner" ).length ) {
 						return;
 					}
+
+					// Create the widget if it doesn't exist
+					if ( !instance ) {
+						instance = element[ widget ]()[ widget ]( "instance" );
+					}
 					if ( instance ) {
-						options.classes = that._resolveClassesValues( options.classes, instance );
+						instanceOptions.classes =
+							that._resolveClassesValues( instanceOptions.classes, instance );
 					}
-					element[ widget ]( options );
+					element[ widget ]( instanceOptions );
 
 					// Store an instance of the controlgroup to be able to reference
 					// from the outermost element for changing options and refresh
@@ -218,12 +228,13 @@ return $.widget( "ui.controlgroup", {
 	},
 
 	_resolveClassesValues: function( classes, instance ) {
+		var result = {};
 		$.each( classes, function( key ) {
 			var current = instance.options.classes[ key ] || "";
 			current = current.replace( controlgroupCornerRegex, "" ).trim();
-			classes[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
+			result[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
 		} );
-		return classes;
+		return result;
 	},
 
 	_setOption: function( key, value ) {