Selectmenu: Introduce _renderButtonItem method

Fixes #10142

Author: fnagel

tests/unit/selectmenu/selectmenu_core.js

@@ -45,6 +45,42 @@ asyncTest( "accessibility", function() {
 });
 
 
+test( "extend _renderButtonItem method", function() {
+	expect( 4 );
+
+	var links, option,
+		element = $( "#speed" ).selectmenu(),
+		instance = element.selectmenu( "instance" ),
+		button = element.selectmenu( "widget" ),
+		menu = element.selectmenu( "menuWidget" );
+
+	instance._renderButtonItem = function( buttonItem, item ) {
+		buttonItem.parent().data( "test", item.value );
+		this._setText( buttonItem, item.label + item.index );
+	};
+
+	element.selectmenu( "refresh" );
+	links = menu.find( "li.ui-menu-item" );
+
+	option = element.find( "option:selected" );
+	equal(
+		option.text() + element[ 0 ].selectedIndex,
+		button.text(),
+		"refresh: button item text"
+	);
+	equal( button.data( "test" ), option.val(), "refresh: button item data" );
+
+	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"
+	);
+	equal( button.data( "test" ), option.val(), "click: button item data" );
+});
+
 $.each([
 	{
 		type: "default",

ui/selectmenu.js

@@ -68,7 +68,11 @@ return $.widget( "ui.selectmenu", {
 
 	_drawButton: function() {
 		var that = this,
-			tabindex = this.element.attr( "tabindex" );
+			tabindex = this.element.attr( "tabindex" ),
+			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 );
@@ -100,12 +104,12 @@ return $.widget( "ui.selectmenu", {
 		})
 			.prependTo( this.button );
 
-		this.buttonText = $( "<span>", {
+		this.buttonItem = $( "<span>", {
 			"class": "ui-selectmenu-text"
 		})
 			.appendTo( this.button );
 
-		this._setText( this.buttonText, this.element.find( "option:selected" ).text() );
+		this._renderButtonItem( this.buttonItem, item );
 		this._resizeButton();
 
 		this._on( this.button, this._buttonEvents );
@@ -185,7 +189,7 @@ return $.widget( "ui.selectmenu", {
 
 	refresh: function() {
 		this._refreshMenu();
-		this._setText( this.buttonText, this._getSelectedItem().text() );
+		this._renderButtonItem( this.buttonItem, this._getSelectedItem().data( "ui-selectmenu-item" ) );
 		if ( !this.options.width ) {
 			this._resizeButton();
 		}
@@ -267,6 +271,10 @@ return $.widget( "ui.selectmenu", {
 		return this.menu;
 	},
 
+	_renderButtonItem: function( buttonItem, item ) {
+		this._setText( buttonItem, item.label );
+	},
+
 	_renderMenu: function( ul, items ) {
 		var that = this,
 			currentOptgroup = "";
@@ -434,7 +442,7 @@ return $.widget( "ui.selectmenu", {
 
 		// Change native select element
 		this.element[ 0 ].selectedIndex = item.index;
-		this._setText( this.buttonText, item.label );
+		this._renderButtonItem( this.buttonItem, item );
 		this._setAria( item );
 		this._trigger( "select", event, { item: item } );
 
@@ -544,22 +552,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();