Skip to content

Commit 3a9a3c7

Browse files
Gabriel Schulhofarschmitz
Gabriel Schulhof
authored andcommitted
Controlgroup: Correctly handle non-empty child class key
Fixes #14984 Closes gh-1713
1 parent 23d1db5 commit 3a9a3c7

File tree

3 files changed

+69
-4
lines changed

3 files changed

+69
-4
lines changed

tests/unit/controlgroup/controlgroup.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,22 @@
6868
<div class="controlgroup-single-button">
6969
<button class="single-button">button</button>
7070
</div>
71+
<div class="controlgroup-class-key-init">
72+
<select id="class-key-init-child">
73+
<option>Option 1</option>
74+
<option>Option 2</option>
75+
</select>
76+
</div>
77+
<div class="controlgroup-class-key-dupe">
78+
<select id="class-key-dupe-first">
79+
<option>Option 1</option>
80+
<option>Option 2</option>
81+
</select>
82+
<select id="class-key-dupe-second">
83+
<option>Option 1</option>
84+
<option>Option 2</option>
85+
</select>
86+
</div>
7187
</div>
7288
</body>
7389
</html>

tests/unit/controlgroup/core.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,4 +160,41 @@ QUnit.test( "Single controlgroup button - vertical", function( assert ) {
160160
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
161161
} );
162162

163+
QUnit.module( "Controlgroup: Non-empty class key", {
164+
setup: function() {
165+
this.classKey = $.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ];
166+
$.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ] =
167+
"something-custom";
168+
},
169+
teardown: function() {
170+
$.ui.selectmenu.prototype.options.classes[ "ui-selectmenu-button-closed" ] = this.classKey;
171+
}
172+
} );
173+
174+
QUnit.test( "Controlgroup instantiates child widgets with correct options", function( assert ) {
175+
assert.expect( 1 );
176+
177+
$( ".controlgroup-class-key-init" ).controlgroup();
178+
179+
assert.hasClasses( $( "#class-key-init-child" ).next(), "something-custom" );
180+
} );
181+
182+
QUnit.test( "Controlgroup correctly assigns child widget classes options key", function( assert ) {
183+
assert.expect( 2 );
184+
185+
$( ".controlgroup-class-key-dupe" ).controlgroup();
186+
187+
assert.strictEqual(
188+
( $( "#class-key-dupe-first" )
189+
.selectmenu( "option", "classes.ui-selectmenu-button-closed" )
190+
.match( /something-custom/g ) || [] ).length, 1,
191+
"Class 'something-custom' appears exactly once in the first widget's class key value" );
192+
193+
assert.strictEqual(
194+
( $( "#class-key-dupe-second" )
195+
.selectmenu( "option", "classes.ui-selectmenu-button-closed" )
196+
.match( /something-custom/g ) || [] ).length, 1,
197+
"Class 'something-custom' appears exactly once in the second widget's class key value" );
198+
} );
199+
163200
} );

ui/widgets/controlgroup.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,14 +118,25 @@ return $.widget( "ui.controlgroup", {
118118
var element = $( this );
119119
var instance = element[ widget ]( "instance" );
120120

121+
// We need to clone the default options for this type of widget to avoid
122+
// polluting the variable options which has a wider scope than a single widget.
123+
var instanceOptions = $.widget.extend( {}, options );
124+
121125
// If the button is the child of a spinner ignore it
126+
// TODO: Find a more generic solution
122127
if ( widget === "button" && element.parent( ".ui-spinner" ).length ) {
123128
return;
124129
}
130+
131+
// Create the widget if it doesn't exist
132+
if ( !instance ) {
133+
instance = element[ widget ]()[ widget ]( "instance" );
134+
}
125135
if ( instance ) {
126-
options.classes = that._resolveClassesValues( options.classes, instance );
136+
instanceOptions.classes =
137+
that._resolveClassesValues( instanceOptions.classes, instance );
127138
}
128-
element[ widget ]( options );
139+
element[ widget ]( instanceOptions );
129140

130141
// Store an instance of the controlgroup to be able to reference
131142
// from the outermost element for changing options and refresh
@@ -218,12 +229,13 @@ return $.widget( "ui.controlgroup", {
218229
},
219230

220231
_resolveClassesValues: function( classes, instance ) {
232+
var result = {};
221233
$.each( classes, function( key ) {
222234
var current = instance.options.classes[ key ] || "";
223235
current = current.replace( controlgroupCornerRegex, "" ).trim();
224-
classes[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
236+
result[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
225237
} );
226-
return classes;
238+
return result;
227239
},
228240

229241
_setOption: function( key, value ) {

0 commit comments

Comments
 (0)