Controlgroup: Correctly handle non-empty child class key

Fixes #14984
Closes gh-1713

3 files changed, 69 insertions, 4 deletions

diff --git a/tests/unit/controlgroup/controlgroup.html b/tests/unit/controlgroup/controlgroup.html
index d90bf607c..db1d47808 100644
--- a/tests/unit/controlgroup/controlgroup.html
+++ b/tests/unit/controlgroup/controlgroup.html
@@ -68,6 +68,22 @@
 	<div class="controlgroup-single-button">
 		<button class="single-button">button</button>
 	</div>
+	<div class="controlgroup-class-key-init">
+		<select id="class-key-init-child">
+			<option>Option 1</option>
+			<option>Option 2</option>
+		</select>
+	</div>
+	<div class="controlgroup-class-key-dupe">
+		<select id="class-key-dupe-first">
+			<option>Option 1</option>
+			<option>Option 2</option>
+		</select>
+		<select id="class-key-dupe-second">
+			<option>Option 1</option>
+			<option>Option 2</option>
+		</select>
+	</div>
 </div>
 </body>
 </html>
diff --git a/tests/unit/controlgroup/core.js b/tests/unit/controlgroup/core.js
index dff3b1b12..789eefc90 100644
--- a/tests/unit/controlgroup/core.js
+++ b/tests/unit/controlgroup/core.js
@@ -160,4 +160,41 @@ 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" ] =
+			"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-class-key-init" ).controlgroup();
+
+	assert.hasClasses( $( "#class-key-init-child" ).next(), "something-custom" );
+} );
+
+QUnit.test( "Controlgroup correctly assigns child widget classes options key", function( assert ) {
+	assert.expect( 2 );
+
+	$( ".controlgroup-class-key-dupe" ).controlgroup();
+
+	assert.strictEqual(
+		( $( "#class-key-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(
+		( $( "#class-key-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" );
+} );
+
 } );
diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js
index 5d2bbba83..071aef658 100644
--- a/ui/widgets/controlgroup.js
+++ b/ui/widgets/controlgroup.js
@@ -118,14 +118,25 @@ 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
+					// TODO: Find a more generic solution
 					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 +229,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 ) {