Selectmenu: Introduce _renderButtonItem() method

Fixes #10142
Closes gh-1299

diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js
index 0074c6f90ab59ba2f60040bc1f8ade372c674861..2ee963043b829f11ebc17cdc5d04b6f18d784a13 100644 (file)
--- a/tests/unit/selectmenu/selectmenu_core.js
+++ b/tests/unit/selectmenu/selectmenu_core.js
@@ -45,6 +45,40 @@ asyncTest( "accessibility", function() {
 });
 
 
+test( "_renderButtonItem()", function() {
+       expect( 2 );
+
+       var option,
+               element = $( "#speed" ).selectmenu(),
+               instance = element.selectmenu( "instance" ),
+               button = element.selectmenu( "widget" ),
+               menu = element.selectmenu( "menuWidget" );
+
+       instance._renderButtonItem = function( item ) {
+               var buttonItem = $( "<span>" );
+               this._setText( buttonItem, item.label + item.index );
+
+               return buttonItem;
+       };
+
+       element.selectmenu( "refresh" );
+       option = element.find( "option:selected" );
+       equal(
+               option.text() + element[ 0 ].selectedIndex,
+               button.text(),
+               "refresh: button item text"
+       );
+
+       button.trigger( "click" );
+       menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" );
+       option = element.find( "option" ).last();
+       equal(
+               option.text() + element[ 0 ].selectedIndex,
+               button.text(),
+               "click: button item text"
+       );
+});
+
 $.each([
        {
                type: "default",

diff --git a/ui/selectmenu.js b/ui/selectmenu.js
index fb9428d867bf9daf0bcaa5b9a3a6cc3b1db332f2..6a9607b612f61f269d067b0b3ba0537ec823496c 100644 (file)
--- a/ui/selectmenu.js
+++ b/ui/selectmenu.js
@@ -67,7 +67,11 @@ return $.widget( "ui.selectmenu", {
        },
 
        _drawButton: function() {
-               var that = this;
+               var that = this,
+                       item = this._parseOption(
+                               this.element.find( "option:selected" ),
+                               this.element[ 0 ].selectedIndex
+                       );
 
                // Associate existing label with the new button
                this.label = $( "label[for='" + this.ids.element + "']" ).attr( "for", this.ids.button );
@@ -99,12 +103,9 @@ return $.widget( "ui.selectmenu", {
                })
                        .prependTo( this.button );
 
-               this.buttonText = $( "<span>", {
-                       "class": "ui-selectmenu-text"
-               })
+               this.buttonItem = this._renderButtonItem( item )
                        .appendTo( this.button );
 
-               this._setText( this.buttonText, this.element.find( "option:selected" ).text() );
                this._resizeButton();
 
                this._on( this.button, this._buttonEvents );
@@ -190,7 +191,11 @@ return $.widget( "ui.selectmenu", {
 
        refresh: function() {
                this._refreshMenu();
-               this._setText( this.buttonText, this._getSelectedItem().text() );
+               this.buttonItem.replaceWith(
+                       this.buttonItem = this._renderButtonItem(
+                               this._getSelectedItem().data( "ui-selectmenu-item" )
+                       )
+               );
                if ( !this.options.width ) {
                        this._resizeButton();
                }
@@ -275,6 +280,15 @@ return $.widget( "ui.selectmenu", {
                return this.menu;
        },
 
+       _renderButtonItem: function( item ) {
+               var buttonItem = $( "<span>", {
+                       "class": "ui-selectmenu-text"
+               });
+               this._setText( buttonItem, item.label );
+
+               return buttonItem;
+       },
+
        _renderMenu: function( ul, items ) {
                var that = this,
                        currentOptgroup = "";
@@ -480,7 +494,7 @@ return $.widget( "ui.selectmenu", {
 
                // Change native select element
                this.element[ 0 ].selectedIndex = item.index;
-               this._setText( this.buttonText, item.label );
+               this.buttonItem.replaceWith( this.buttonItem = this._renderButtonItem( item ) );
                this._setAria( item );
                this._trigger( "select", event, { item: item } );
 
@@ -590,22 +604,27 @@ return $.widget( "ui.selectmenu", {
        },
 
        _parseOptions: function( options ) {
-               var data = [];
+               var that = this,
+                       data = [];
                options.each(function( index, item ) {
-                       var option = $( item ),
-                               optgroup = option.parent( "optgroup" );
-                       data.push({
-                               element: option,
-                               index: index,
-                               value: option.attr( "value" ),
-                               label: option.text(),
-                               optgroup: optgroup.attr( "label" ) || "",
-                               disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" )
-                       });
+                       data.push( that._parseOption( $( item ), index ) );
                });
                this.items = data;
        },
 
+       _parseOption: function( option, index ) {
+               var optgroup = option.parent( "optgroup" );
+
+               return {
+                       element: option,
+                       index: index,
+                       value: option.attr( "value" ),
+                       label: option.text(),
+                       optgroup: optgroup.attr( "label" ) || "",
+                       disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" )
+               };
+       },
+
        _destroy: function() {
                this.menuWrap.remove();
                this.button.remove();