Skip to content

Commit e9643f6

Browse files
tjvantolltjvantoll
committed
Selectmenu: Re-add wrappers to menu items
1 parent 4ac7b1f commit e9643f6

File tree

3 files changed

+60
-55
lines changed

3 files changed

+60
-55
lines changed

‎demos/selectmenu/custom_render.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
$(function() {
1717
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
1818
_renderItem: function( ul, item ) {
19-
var li = $( "<li>", { text: item.label } );
19+
var li = $( "<li>" ),
20+
wrapper = $( "<div>", { text: item.label } );
2021

2122
if ( item.disabled ) {
2223
li.addClass( "ui-state-disabled" );
@@ -26,9 +27,9 @@
2627
style: item.element.attr( "data-style" ),
2728
"class": "ui-icon " + item.element.attr( "data-class" )
2829
})
29-
.appendTo( li );
30+
.appendTo( wrapper );
3031

31-
return li.appendTo( ul );
32+
return li.append( wrapper ).appendTo( ul );
3233
}
3334
});
3435

@@ -63,7 +64,7 @@
6364
}
6465

6566
/* select with custom icons */
66-
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
67+
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
6768
padding: 0.5em 0 0.5em 3em;
6869
}
6970
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {

‎tests/unit/selectmenu/selectmenu_core.js

+44-43
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
module( "selectmenu: core" );
44

55
asyncTest( "accessibility", function() {
6-
var links,
6+
var wrappers,
77
element = $( "#speed" ).selectmenu(),
88
button = element.selectmenu( "widget" ),
99
menu = element.selectmenu( "menuWidget" );
1010

1111
button.simulate( "focus" );
12-
links = menu.find( "li.ui-menu-item" );
12+
wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
1313

14-
expect( 12 + links.length * 2 );
14+
expect( 12 + wrappers.length * 2 );
1515

1616
setTimeout(function() {
1717
equal( button.attr( "role" ), "combobox", "button role" );
@@ -21,7 +21,7 @@ asyncTest( "accessibility", function() {
2121
equal( button.attr( "aria-owns" ), menu.attr( "id" ), "button aria-owns" );
2222
equal(
2323
button.attr( "aria-labelledby" ),
24-
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
24+
wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
2525
"button link aria-labelledby"
2626
);
2727
equal( button.attr( "tabindex" ), 0, "button link tabindex" );
@@ -32,10 +32,10 @@ asyncTest( "accessibility", function() {
3232
equal( menu.attr( "tabindex" ), 0, "menu tabindex" );
3333
equal(
3434
menu.attr( "aria-activedescendant" ),
35-
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
35+
wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
3636
"menu aria-activedescendant"
3737
);
38-
$.each( links, function( index ) {
38+
$.each( wrappers, function( index ) {
3939
var link = $( this );
4040
equal( link.attr( "role" ), "option", "menu link #" + index +" role" );
4141
equal( link.attr( "tabindex" ), -1, "menu link #" + index +" tabindex" );
@@ -58,7 +58,7 @@ $.each([
5858
asyncTest( "state synchronization - after keydown on button - " + settings.type, function() {
5959
expect( 4 );
6060

61-
var links,
61+
var wrappers,
6262
element = $( settings.selector ).selectmenu(),
6363
button = element.selectmenu( "widget" ),
6464
menu = element.selectmenu( "menuWidget" ),
@@ -69,17 +69,17 @@ $.each([
6969

7070
button.simulate( "focus" );
7171
setTimeout(function() {
72-
links = menu.find( "li.ui-menu-item" );
72+
wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
7373

7474
button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
7575
equal(
7676
menu.attr( "aria-activedescendant" ),
77-
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
77+
wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
7878
"menu aria-activedescendant"
7979
);
8080
equal(
8181
button.attr( "aria-activedescendant" ),
82-
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
82+
wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
8383
"button aria-activedescendant"
8484
);
8585
equal(
@@ -95,26 +95,26 @@ $.each([
9595
asyncTest( "state synchronization - after click on item - " + settings.type, function() {
9696
expect( 4 );
9797

98-
var links,
98+
var wrappers,
9999
element = $( settings.selector ).selectmenu(),
100100
button = element.selectmenu( "widget" ),
101101
menu = element.selectmenu( "menuWidget" ),
102102
selected = element.find( "option" ).last();
103103

104104
button.simulate( "focus" );
105105
setTimeout(function() {
106-
links = menu.find( "li.ui-menu-item" );
106+
wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
107107

108108
button.trigger( "click" );
109109
menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" );
110110
equal(
111111
menu.attr( "aria-activedescendant" ),
112-
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
112+
wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
113113
"menu aria-activedescendant"
114114
);
115115
equal(
116116
button.attr( "aria-activedescendant" ),
117-
links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
117+
wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
118118
"button aria-activedescendant"
119119
);
120120
equal(
@@ -131,7 +131,7 @@ $.each([
131131
"after focus item and keydown on button - " + settings.type, function() {
132132
expect( 4 );
133133

134-
var links,
134+
var wrappers,
135135
element = $( settings.selector ).selectmenu(),
136136
button = element.selectmenu( "widget" ),
137137
menu = element.selectmenu( "menuWidget" ),
@@ -141,25 +141,25 @@ $.each([
141141
button.simulate( "focus" );
142142

143143
setTimeout(function() {
144-
links = menu.find( "li.ui-menu-item" );
144+
wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
145145

146146
// Open menu and click first item
147147
button.trigger( "click" );
148-
links.first().simulate( "mouseover" ).trigger( "click" );
148+
wrappers.first().simulate( "mouseover" ).trigger( "click" );
149149

150150
// Open menu again and hover item
151151
button.trigger( "click" );
152-
links.eq( 3 ).simulate( "mouseover" );
152+
wrappers.eq( 3 ).simulate( "mouseover" );
153153

154154
// Close and use keyboard control on button
155155
button.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
156156
button.simulate( "focus" );
157157
setTimeout(function() {
158158
button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
159159

160-
equal( menu.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ),
160+
equal( menu.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ),
161161
"menu aria-activedescendant" );
162-
equal( button.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ),
162+
equal( button.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ),
163163
"button aria-activedescendant" );
164164
equal( element.find( "option:selected" ).val(), options.eq( 1 ).val() ,
165165
"original select state" );
@@ -172,54 +172,54 @@ $.each([
172172
asyncTest( "item looping - " + settings.type, function() {
173173
expect( 4 );
174174

175-
var links,
175+
var wrappers,
176176
element = $( settings.selector ).selectmenu(),
177177
button = element.selectmenu( "widget" ),
178178
menu = element.selectmenu( "menuWidget" );
179179

180180
button.simulate( "focus" );
181181
setTimeout(function() {
182-
links = menu.find( "li.ui-menu-item" );
182+
wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
183183

184184
button.trigger( "click" );
185-
links.first().simulate( "mouseover" ).trigger( "click" );
185+
wrappers.first().simulate( "mouseover" ).trigger( "click" );
186186
equal( element[ 0 ].selectedIndex, 0, "First item is selected" );
187187
button.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
188188
equal( element[ 0 ].selectedIndex, 0, "No looping beyond first item" );
189189

190190
button.trigger( "click" );
191-
links.last().simulate( "mouseover" ).trigger( "click" );
192-
equal( element[ 0 ].selectedIndex, links.length - 1, "Last item is selected" );
191+
wrappers.last().simulate( "mouseover" ).trigger( "click" );
192+
equal( element[ 0 ].selectedIndex, wrappers.length - 1, "Last item is selected" );
193193
button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
194-
equal( element[ 0 ].selectedIndex, links.length - 1, "No looping behind last item" );
194+
equal( element[ 0 ].selectedIndex, wrappers.length - 1, "No looping behind last item" );
195195
start();
196196
});
197197
});
198198

199199
asyncTest( "item focus and active state - " + settings.type, function() {
200200
expect( 4 );
201201

202-
var items, focusedItem,
202+
var wrappers, focusedItem,
203203
element = $( settings.selector ).selectmenu(),
204204
button = element.selectmenu( "widget" ),
205205
menu = element.selectmenu( "menuWidget" );
206206

207207
button.simulate( "focus" );
208208
setTimeout(function() {
209-
items = menu.find( "li.ui-menu-item" );
209+
wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
210210

211211
button.trigger( "click" );
212212
setTimeout(function() {
213213
checkItemClasses();
214214

215-
items.eq( 3 ).simulate( "mouseover" ).trigger( "click" );
215+
wrappers.eq( 3 ).simulate( "mouseover" ).trigger( "click" );
216216

217217
button.trigger( "click" );
218-
items.eq( 2 ).simulate( "mouseover" );
218+
wrappers.eq( 2 ).simulate( "mouseover" );
219219
$( document ).trigger( "click" );
220220

221221
button.trigger( "click" );
222-
items.eq( 1 ).simulate( "mouseover" );
222+
wrappers.eq( 1 ).simulate( "mouseover" );
223223
$( document ).trigger( "click" );
224224

225225
button.trigger( "click" );
@@ -231,17 +231,17 @@ $.each([
231231
});
232232

233233
function checkItemClasses() {
234-
focusedItem = menu.find( "li.ui-state-focus" );
234+
focusedItem = menu.find( "li .ui-state-focus" );
235235
equal( focusedItem.length, 1, "only one item has ui-state-focus class" );
236-
equal( focusedItem.attr( "id" ), items.eq( element[ 0 ].selectedIndex ).attr( "id" ),
236+
equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
237237
"selected item has ui-state-focus class" );
238238
}
239239
});
240240

241241
asyncTest( "empty option - " + settings.type, function() {
242242
expect( 7 );
243243

244-
var button, menu, links, link,
244+
var button, menu, wrappers, wrapper,
245245
element = $( settings.selector );
246246

247247
element.find( "option" ).first().text( "" );
@@ -251,20 +251,21 @@ $.each([
251251

252252
button.simulate( "focus" );
253253
setTimeout(function() {
254-
links = menu.find( "li:not(.ui-selectmenu-optgroup)" );
255-
link = links.first();
254+
wrappers = menu.find( "li:not(.ui-selectmenu-optgroup) .ui-menu-item-wrapper" );
255+
wrapper = wrappers.first();
256256

257257
button.trigger( "click" );
258258

259-
equal( links.length, element.find( "option" ).length,
259+
equal( wrappers.length, element.find( "option" ).length,
260260
"correct amount of list elements" );
261-
ok( link.outerHeight() > 10, "empty item seems to have reasonable height" );
262-
ok( link.attr( "id" ), "empty item has id attribute" );
263-
ok( link.hasClass( "ui-menu-item" ), "empty item has ui-menu-item class" );
264-
ok( !link.hasClass( "ui-menu-divider" ),
261+
ok( wrapper.outerHeight() > 10, "empty item seems to have reasonable height" );
262+
ok( wrapper.attr( "id" ), "empty item has id attribute" );
263+
ok( wrapper.parent().hasClass( "ui-menu-item" ),
264+
"empty item has ui-menu-item class" );
265+
ok( !wrapper.hasClass( "ui-menu-divider" ),
265266
"empty item does not have ui-menu-divider class" );
266-
equal( link.attr( "tabindex" ), -1, "empty item has tabindex" );
267-
equal( link.attr( "role" ), "option", "empty item has role option" );
267+
equal( wrapper.attr( "tabindex" ), -1, "empty item has tabindex" );
268+
equal( wrapper.attr( "role" ), "option", "empty item has role option" );
268269

269270
start();
270271
});

‎ui/selectmenu.js

+11-8
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,9 @@ return $.widget( "ui.selectmenu", {
210210
this._renderMenu( this.menu, this.items );
211211

212212
this.menuInstance.refresh();
213-
this.menuItems = this.menu.find( "li" ).not( ".ui-selectmenu-optgroup" );
213+
this.menuItems = this.menu.find( "li" )
214+
.not( ".ui-selectmenu-optgroup" )
215+
.find( ".ui-menu-item-wrapper" );
214216

215217
item = this._getSelectedItem();
216218

@@ -300,14 +302,15 @@ return $.widget( "ui.selectmenu", {
300302
},
301303

302304
_renderItem: function( ul, item ) {
303-
var li = $( "<li>" );
305+
var li = $( "<li>" ),
306+
wrapper = $( "<div>" );
304307

305308
if ( item.disabled ) {
306309
li.addClass( "ui-state-disabled" );
307310
}
308-
this._setText( li, item.label );
311+
this._setText( wrapper, item.label );
309312

310-
return li.appendTo( ul );
313+
return li.append( wrapper ).appendTo( ul );
311314
},
312315

313316
_setText: function( element, value ) {
@@ -323,9 +326,9 @@ return $.widget( "ui.selectmenu", {
323326
filter = ".ui-menu-item";
324327

325328
if ( this.isOpen ) {
326-
item = this.menuItems.eq( this.focusIndex );
329+
item = this.menuItems.eq( this.focusIndex ).parent( "li" );
327330
} else {
328-
item = this.menuItems.eq( this.element[ 0 ].selectedIndex );
331+
item = this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
329332
filter += ":not(.ui-state-disabled)";
330333
}
331334

@@ -341,7 +344,7 @@ return $.widget( "ui.selectmenu", {
341344
},
342345

343346
_getSelectedItem: function() {
344-
return this.menuItems.eq( this.element[ 0 ].selectedIndex );
347+
return this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
345348
},
346349

347350
_toggle: function( event ) {
@@ -466,7 +469,7 @@ return $.widget( "ui.selectmenu", {
466469
},
467470

468471
_selectFocusedItem: function( event ) {
469-
var item = this.menuItems.eq( this.focusIndex );
472+
var item = this.menuItems.eq( this.focusIndex ).parent( "li" );
470473
if ( !item.hasClass( "ui-state-disabled" ) ) {
471474
this._select( item.data( "ui-selectmenu-item" ), event );
472475
}

0 commit comments

Comments
 (0)