Controlgroup: Don't remove existing classes classes

unless its a corner class

Fixes #14960

4 files changed, 94 insertions, 9 deletions

diff --git a/tests/unit/controlgroup/controlgroup.html b/tests/unit/controlgroup/controlgroup.html
index 9767381ac..9983232ec 100644
--- a/tests/unit/controlgroup/controlgroup.html
+++ b/tests/unit/controlgroup/controlgroup.html
@@ -36,6 +36,27 @@
 			<option>Slow</option>
 		</select>
 	</div>
+	<select id="select-sanatize">
+		<option>Fast</option>
+		<option>Medium</option>
+		<option>Slow</option>
+	</select>
+	<div class="controlgroup-pre">
+		<select id="select-pre">
+			<option>Fast</option>
+			<option>Medium</option>
+			<option>Slow</option>
+		</select>
+		<button>Button with icon on the bottom</button>
+	</div>
+	<div class="controlgroup-refresh">
+		<select id="select-refresh">
+			<option>Fast</option>
+			<option>Medium</option>
+			<option>Slow</option>
+		</select>
+		<button>Button with icon on the bottom</button>
+	</div>
 </div>
 </body>
 </html>
diff --git a/tests/unit/controlgroup/core.js b/tests/unit/controlgroup/core.js
index c1b1556aa..205633594 100644
--- a/tests/unit/controlgroup/core.js
+++ b/tests/unit/controlgroup/core.js
@@ -74,4 +74,29 @@ QUnit.test( "selectmenu: controlgroupLabel", function( assert ) {
 	assert.hasClasses( label.find( "span" ), "ui-controlgroup-label-contents" );
 } );
 
+var assertSanatized = function( assert, initClasses, expectedClasses, message ) {
+	var selectmenu = $( "#select-sanatize" ).selectmenu({
+		classes: {
+			"ui-selectmenu-button-open": initClasses
+		}
+	}).selectmenu( "instance" );
+	var classes = {
+		"ui-selectmenu-button-open": "ui-corner-top"
+	};
+	var result = $.ui.controlgroup.prototype._resolveClassesValues( classes, selectmenu );
+	assert.deepEqual( result, {
+		"ui-selectmenu-button-open": expectedClasses + " ui-corner-top"
+	}, message );
+}
+
+QUnit.test( "_resolveClassesValues", function( assert ) {
+	assert.expect( 6 );
+	assertSanatized( assert, "bar ui-corner-bottom", "bar", "Single Corner Class Removed end" );
+	assertSanatized( assert, "ui-corner-bottom bar", "bar", "Single Corner Class Removed beginning" );
+	assertSanatized( assert, "bar ui-corner-bottom ui-corner-left", "bar", "Multiple Corner Class Removed end" );
+	assertSanatized( assert, "ui-corner-bottom ui-corner-left bar", "bar", "Multiple Corner Class Removed beginning" );
+	assertSanatized( assert, "bar ui-corner-bottom ui-corner-left foo", "bar foo", "Multiple Corner Class Removed Middle" );
+	assertSanatized( assert, "bar", "bar", "No corner Class" );
+} );
+
 } );
diff --git a/tests/unit/controlgroup/methods.js b/tests/unit/controlgroup/methods.js
index 94f189747..9f1e4201e 100644
--- a/tests/unit/controlgroup/methods.js
+++ b/tests/unit/controlgroup/methods.js
@@ -148,4 +148,27 @@ $.each( tests, function( widget, html ) {
 	} );
 } );
 
+QUnit.test( "Child Classes Option: init", function( assert ) {
+	assert.expect( 1 );
+	var selectmenu = $( "#select-pre" ).selectmenu( {
+		classes: {
+			"ui-selectmenu-button-closed": "test-class"
+		}
+	} );
+	var controlgroup = $( ".controlgroup-pre" ).controlgroup();
+	assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" );
+} );
+
+QUnit.test( "Child Classes Option: refresh", function( assert ) {
+	assert.expect( 1 );
+	var controlgroup = $( ".controlgroup-refresh" ).controlgroup();
+	var selectmenu = $( "#select-refresh" ).selectmenu( {
+		classes: {
+			"ui-selectmenu-button-closed": "test-class"
+		}
+	} );
+	controlgroup.controlgroup( "refresh" );
+	assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" );
+} );
+
 } );
diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js
index 1f0da070e..641a419ed 100644
--- a/ui/widgets/controlgroup.js
+++ b/ui/widgets/controlgroup.js
@@ -30,6 +30,7 @@
 		factory( jQuery );
 	}
 }( function( $ ) {
+var removeClassRegex = /ui-corner-([a-z]){2,6}/g;
 
 return $.widget( "ui.controlgroup", {
 	version: "@VERSION",
@@ -107,15 +108,20 @@ return $.widget( "ui.controlgroup", {
 
 			// Find instances of this widget inside controlgroup and init them
 			that.element
-				.find( selector )[ widget ]( options )
+				.find( selector )
 				.each( function() {
 					var element = $( this );
+					var instance = element[ widget ]( "instance" );
+					if ( instance ) {
+						options.classes = that._resolveClassesValues( options.classes, instance );
+					}
+					element[ widget ]( options );
 
 					// Store an instance of the controlgroup to be able to reference
 					// from the outermost element for changing options and refresh
 					var widgetElement = element[ widget ]( "widget" );
 					$.data( widgetElement[ 0 ], "ui-controlgroup-data",
-						element[ widget ]( "instance" ) );
+						instance ? instance : element[ widget ]( "instance" ) );
 
 					childWidgets.push( widgetElement[ 0 ] );
 				} );
@@ -149,7 +155,7 @@ return $.widget( "ui.controlgroup", {
 			classes: {}
 		};
 		result.classes[ key ] = {
-			"middle": null,
+			"middle": "",
 			"first": "ui-corner-" + ( direction ? "top" : "left" ),
 			"last": "ui-corner-" + ( direction ? "bottom" : "right" )
 		}[ position ];
@@ -180,15 +186,15 @@ return $.widget( "ui.controlgroup", {
 			width: direction ? "auto" : false,
 			classes: {
 				middle: {
-					"ui-selectmenu-button-open": null,
-					"ui-selectmenu-button-closed": null
+					"ui-selectmenu-button-open": "",
+					"ui-selectmenu-button-closed": ""
 				},
 				first: {
 					"ui-selectmenu-button-open": "ui-corner-" + ( direction ? "top" : "tl" ),
 					"ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "top" : "left" )
 				},
 				last: {
-					"ui-selectmenu-button-open": direction ? null : "ui-corner-tr",
+					"ui-selectmenu-button-open": direction ? "" : "ui-corner-tr",
 					"ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" )
 				}
 
@@ -196,6 +202,15 @@ return $.widget( "ui.controlgroup", {
 		};
 	},
 
+	_resolveClassesValues: function( classes, instance ) {
+		$.each( classes, function( key ) {
+			var current = instance.options.classes[ key ] || "";
+			current = current.replace( removeClassRegex, "" ).trim();
+			classes[ key ] = ( current + " " + classes[ key ] ).replace( / +/g, " " );
+		} );
+		return classes;
+	},
+
 	_setOption: function( key, value ) {
 		if ( key === "direction" ) {
 			this._removeClass( "ui-controlgroup-" + this.options.direction );
@@ -236,9 +251,10 @@ return $.widget( "ui.controlgroup", {
 				var instance = children[ value ]().data( "ui-controlgroup-data" );
 
 				if ( instance && that[ "_" + instance.widgetName + "Options" ] ) {
-					instance.element[ instance.widgetName ](
-						that[ "_" + instance.widgetName + "Options" ]( value )
-					);
+					var options = that[ "_" + instance.widgetName + "Options" ]( value );
+
+					options.classes = that._resolveClassesValues( options.classes, instance );
+					instance.element[ instance.widgetName ]( options );
 				} else {
 					that._updateCornerClass( children[ value ](), value );
 				}