Selectmenu: Re-add wrappers to menu items

diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html
index 76493dc98dc0b767dd3a6131a6417da57f45d216..9329b81b13aaa40d0eed607e8bd5f786eb4be969 100644 (file)
--- a/demos/selectmenu/custom_render.html
+++ b/demos/selectmenu/custom_render.html
@@ -16,7 +16,8 @@
        $(function() {
                $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
                        _renderItem: function( ul, item ) {
-                               var li = $( "<li>", { text: item.label } );
+                               var li = $( "<li>" ),
+                                       wrapper = $( "<div>", { text: item.label } );
 
                                if ( item.disabled ) {
                                        li.addClass( "ui-state-disabled" );
@@ -26,9 +27,9 @@
                                        style: item.element.attr( "data-style" ),
                                        "class": "ui-icon " + item.element.attr( "data-class" )
                                })
-                                       .appendTo( li );
+                                       .appendTo( wrapper );
 
-                               return li.appendTo( ul );
+                               return li.append( wrapper ).appendTo( ul );
                        }
                });
 
@@ -63,7 +64,7 @@
                }
 
                /* select with custom icons */
-               .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
+               .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
                        padding: 0.5em 0 0.5em 3em;
                }
                .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {

diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js
index e9312d12fc1ccc7fa43c2f9f847f66815edf4e92..0074c6f90ab59ba2f60040bc1f8ade372c674861 100644 (file)
--- a/tests/unit/selectmenu/selectmenu_core.js
+++ b/tests/unit/selectmenu/selectmenu_core.js
@@ -3,15 +3,15 @@
 module( "selectmenu: core" );
 
 asyncTest( "accessibility", function() {
-       var links,
+       var wrappers,
                element = $( "#speed" ).selectmenu(),
                button = element.selectmenu( "widget" ),
                menu = element.selectmenu( "menuWidget" );
 
        button.simulate( "focus" );
-       links = menu.find( "li.ui-menu-item" );
+       wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
 
-       expect( 12 + links.length * 2 );
+       expect( 12 + wrappers.length * 2 );
 
        setTimeout(function() {
                equal( button.attr( "role" ), "combobox", "button role" );
@@ -21,7 +21,7 @@ asyncTest( "accessibility", function() {
                equal( button.attr( "aria-owns" ), menu.attr( "id" ), "button aria-owns" );
                equal(
                        button.attr( "aria-labelledby" ),
-                       links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+                       wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
                        "button link aria-labelledby"
                );
                equal( button.attr( "tabindex" ), 0, "button link tabindex" );
@@ -32,10 +32,10 @@ asyncTest( "accessibility", function() {
                equal( menu.attr( "tabindex" ), 0, "menu tabindex" );
                equal(
                        menu.attr( "aria-activedescendant" ),
-                       links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+                       wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
                        "menu aria-activedescendant"
                );
-               $.each( links, function( index ) {
+               $.each( wrappers, function( index ) {
                        var link = $( this );
                        equal( link.attr( "role" ), "option", "menu link #" + index +" role" );
                        equal( link.attr( "tabindex" ), -1, "menu link #" + index +" tabindex" );
@@ -58,7 +58,7 @@ $.each([
        asyncTest( "state synchronization - after keydown on button - " + settings.type, function() {
                expect( 4 );
 
-               var links,
+               var wrappers,
                        element = $( settings.selector ).selectmenu(),
                        button = element.selectmenu( "widget" ),
                        menu = element.selectmenu( "menuWidget" ),
@@ -69,17 +69,17 @@ $.each([
 
                button.simulate( "focus" );
                setTimeout(function() {
-                       links = menu.find( "li.ui-menu-item" );
+                       wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
 
                        button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
                        equal(
                                menu.attr( "aria-activedescendant" ),
-                               links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+                               wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
                                "menu aria-activedescendant"
                        );
                        equal(
                                button.attr( "aria-activedescendant" ),
-                               links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+                               wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
                                "button aria-activedescendant"
                        );
                        equal(
@@ -95,7 +95,7 @@ $.each([
        asyncTest( "state synchronization - after click on item - " + settings.type, function() {
                expect( 4 );
 
-               var links,
+               var wrappers,
                        element = $( settings.selector ).selectmenu(),
                        button = element.selectmenu( "widget" ),
                        menu = element.selectmenu( "menuWidget" ),
@@ -103,18 +103,18 @@ $.each([
 
                button.simulate( "focus" );
                setTimeout(function() {
-                       links = menu.find( "li.ui-menu-item" );
+                       wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
 
                        button.trigger( "click" );
                        menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" );
                        equal(
                                menu.attr( "aria-activedescendant" ),
-                               links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+                               wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
                                "menu aria-activedescendant"
                        );
                        equal(
                                button.attr( "aria-activedescendant" ),
-                               links.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+                               wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
                                "button aria-activedescendant"
                        );
                        equal(
@@ -131,7 +131,7 @@ $.each([
                        "after focus item and keydown on button - " + settings.type, function() {
                expect( 4 );
 
-               var links,
+               var wrappers,
                        element = $( settings.selector ).selectmenu(),
                        button = element.selectmenu( "widget" ),
                        menu = element.selectmenu( "menuWidget" ),
@@ -141,15 +141,15 @@ $.each([
                button.simulate( "focus" );
 
                setTimeout(function() {
-                       links = menu.find( "li.ui-menu-item" );
+                       wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
 
                        // Open menu and click first item
                        button.trigger( "click" );
-                       links.first().simulate( "mouseover" ).trigger( "click" );
+                       wrappers.first().simulate( "mouseover" ).trigger( "click" );
 
                        // Open menu again and hover item
                        button.trigger( "click" );
-                       links.eq( 3 ).simulate( "mouseover" );
+                       wrappers.eq( 3 ).simulate( "mouseover" );
 
                        // Close and use keyboard control on button
                        button.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } );
@@ -157,9 +157,9 @@ $.each([
                        setTimeout(function() {
                                button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
 
-                               equal( menu.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ),
+                               equal( menu.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ),
                                        "menu aria-activedescendant" );
-                               equal( button.attr( "aria-activedescendant" ), links.eq( 1 ).attr( "id" ),
+                               equal( button.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ),
                                        "button aria-activedescendant" );
                                equal( element.find( "option:selected" ).val(), options.eq( 1 ).val() ,
                                        "original select state" );
@@ -172,26 +172,26 @@ $.each([
        asyncTest( "item looping - " + settings.type, function() {
                expect( 4 );
 
-               var links,
+               var wrappers,
                        element = $( settings.selector ).selectmenu(),
                        button = element.selectmenu( "widget" ),
                        menu = element.selectmenu( "menuWidget" );
 
                button.simulate( "focus" );
                setTimeout(function() {
-                       links = menu.find( "li.ui-menu-item" );
+                       wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
 
                        button.trigger( "click" );
-                       links.first().simulate( "mouseover" ).trigger( "click" );
+                       wrappers.first().simulate( "mouseover" ).trigger( "click" );
                        equal( element[ 0 ].selectedIndex, 0, "First item is selected" );
                        button.simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
                        equal( element[ 0 ].selectedIndex, 0, "No looping beyond first item" );
 
                        button.trigger( "click" );
-                       links.last().simulate( "mouseover" ).trigger( "click" );
-                       equal( element[ 0 ].selectedIndex, links.length - 1, "Last item is selected" );
+                       wrappers.last().simulate( "mouseover" ).trigger( "click" );
+                       equal( element[ 0 ].selectedIndex, wrappers.length - 1, "Last item is selected" );
                        button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
-                       equal( element[ 0 ].selectedIndex, links.length - 1, "No looping behind last item" );
+                       equal( element[ 0 ].selectedIndex, wrappers.length - 1, "No looping behind last item" );
                        start();
                });
        });
@@ -199,27 +199,27 @@ $.each([
        asyncTest( "item focus and active state - " + settings.type, function() {
                expect( 4 );
 
-               var items, focusedItem,
+               var wrappers, focusedItem,
                        element = $( settings.selector ).selectmenu(),
                        button = element.selectmenu( "widget" ),
                        menu = element.selectmenu( "menuWidget" );
 
                button.simulate( "focus" );
                setTimeout(function() {
-                       items = menu.find( "li.ui-menu-item" );
+                       wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" );
 
                        button.trigger( "click" );
                        setTimeout(function() {
                                checkItemClasses();
 
-                               items.eq( 3 ).simulate( "mouseover" ).trigger( "click" );
+                               wrappers.eq( 3 ).simulate( "mouseover" ).trigger( "click" );
 
                                button.trigger( "click" );
-                               items.eq( 2 ).simulate( "mouseover" );
+                               wrappers.eq( 2 ).simulate( "mouseover" );
                                $( document ).trigger( "click" );
 
                                button.trigger( "click" );
-                               items.eq( 1 ).simulate( "mouseover" );
+                               wrappers.eq( 1 ).simulate( "mouseover" );
                                $( document ).trigger( "click" );
 
                                button.trigger( "click" );
@@ -231,9 +231,9 @@ $.each([
                });
 
                function checkItemClasses() {
-                       focusedItem = menu.find( "li.ui-state-focus" );
+                       focusedItem = menu.find( "li .ui-state-focus" );
                        equal( focusedItem.length, 1, "only one item has ui-state-focus class" );
-                       equal( focusedItem.attr( "id" ), items.eq( element[ 0 ].selectedIndex ).attr( "id" ),
+                       equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ),
                                "selected item has ui-state-focus class" );
                }
        });
@@ -241,7 +241,7 @@ $.each([
        asyncTest( "empty option - " + settings.type, function() {
                expect( 7 );
 
-               var button, menu, links, link,
+               var button, menu, wrappers, wrapper,
                        element = $( settings.selector );
 
                element.find( "option" ).first().text( "" );
@@ -251,20 +251,21 @@ $.each([
 
                button.simulate( "focus" );
                setTimeout(function() {
-                       links = menu.find( "li:not(.ui-selectmenu-optgroup)" );
-                       link = links.first();
+                       wrappers = menu.find( "li:not(.ui-selectmenu-optgroup) .ui-menu-item-wrapper" );
+                       wrapper = wrappers.first();
 
                        button.trigger( "click" );
 
-                       equal( links.length, element.find( "option" ).length,
+                       equal( wrappers.length, element.find( "option" ).length,
                                "correct amount of list elements" );
-                       ok( link.outerHeight() > 10, "empty item seems to have reasonable height" );
-                       ok( link.attr( "id" ), "empty item has id attribute" );
-                       ok( link.hasClass( "ui-menu-item" ), "empty item has ui-menu-item class" );
-                       ok( !link.hasClass( "ui-menu-divider" ),
+                       ok( wrapper.outerHeight() > 10, "empty item seems to have reasonable height" );
+                       ok( wrapper.attr( "id" ), "empty item has id attribute" );
+                       ok( wrapper.parent().hasClass( "ui-menu-item" ),
+                               "empty item has ui-menu-item class" );
+                       ok( !wrapper.hasClass( "ui-menu-divider" ),
                                "empty item does not have ui-menu-divider class" );
-                       equal( link.attr( "tabindex" ), -1, "empty item has tabindex" );
-                       equal( link.attr( "role" ), "option", "empty item has role option" );
+                       equal( wrapper.attr( "tabindex" ), -1, "empty item has tabindex" );
+                       equal( wrapper.attr( "role" ), "option", "empty item has role option" );
 
                        start();
                });

diff --git a/ui/selectmenu.js b/ui/selectmenu.js
index 14c81efee87b1bdf5f0994e021f6f1495ef93d66..fb9428d867bf9daf0bcaa5b9a3a6cc3b1db332f2 100644 (file)
--- a/ui/selectmenu.js
+++ b/ui/selectmenu.js
@@ -210,7 +210,9 @@ return $.widget( "ui.selectmenu", {
                this._renderMenu( this.menu, this.items );
 
                this.menuInstance.refresh();
-               this.menuItems = this.menu.find( "li" ).not( ".ui-selectmenu-optgroup" );
+               this.menuItems = this.menu.find( "li" )
+                       .not( ".ui-selectmenu-optgroup" )
+                               .find( ".ui-menu-item-wrapper" );
 
                item = this._getSelectedItem();
 
@@ -300,14 +302,15 @@ return $.widget( "ui.selectmenu", {
        },
 
        _renderItem: function( ul, item ) {
-               var li = $( "<li>" );
+               var li = $( "<li>" ),
+                       wrapper = $( "<div>" );
 
                if ( item.disabled ) {
                        li.addClass( "ui-state-disabled" );
                }
-               this._setText( li, item.label );
+               this._setText( wrapper, item.label );
 
-               return li.appendTo( ul );
+               return li.append( wrapper ).appendTo( ul );
        },
 
        _setText: function( element, value ) {
@@ -323,9 +326,9 @@ return $.widget( "ui.selectmenu", {
                        filter = ".ui-menu-item";
 
                if ( this.isOpen ) {
-                       item = this.menuItems.eq( this.focusIndex );
+                       item = this.menuItems.eq( this.focusIndex ).parent( "li" );
                } else {
-                       item = this.menuItems.eq( this.element[ 0 ].selectedIndex );
+                       item = this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
                        filter += ":not(.ui-state-disabled)";
                }
 
@@ -341,7 +344,7 @@ return $.widget( "ui.selectmenu", {
        },
 
        _getSelectedItem: function() {
-               return this.menuItems.eq( this.element[ 0 ].selectedIndex );
+               return this.menuItems.eq( this.element[ 0 ].selectedIndex ).parent( "li" );
        },
 
        _toggle: function( event ) {
@@ -466,7 +469,7 @@ return $.widget( "ui.selectmenu", {
        },
 
        _selectFocusedItem: function( event ) {
-               var item = this.menuItems.eq( this.focusIndex );
+               var item = this.menuItems.eq( this.focusIndex ).parent( "li" );
                if ( !item.hasClass( "ui-state-disabled" ) ) {
                        this._select( item.data( "ui-selectmenu-item" ), event );
                }