Selectmenu: Introduce _renderButtonItem() method

Fixes #10142
Closes gh-1299

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",

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();