Selectmenu: Introduce _renderButtonItem() method

Fixes #10142
Closes gh-1299

1 files changed, 37 insertions, 18 deletions

diff --git a/ui/selectmenu.js b/ui/selectmenu.js
index fb9428d86..6a9607b61 100644
--- 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();