Selectmenu: Use button markup removing the text span

Fixes #14938

Author: arschmitz

themes/base/selectmenu.css

@@ -39,8 +39,10 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 14em;
+	padding-right: 2em;
 }
 .ui-selectmenu-icon.ui-icon {
 	float: right;
 	margin-top: 0;
+	margin-right: -1em;
 }

ui/widgets/selectmenu.js

@@ -119,11 +119,10 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 		this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
 			"ui-button ui-widget" );
 
-		this.buttonItem = this._renderButtonItem( item )
-			.appendTo( this.button );
+		this.setButtonText( item );
 
-		icon = $( "<span>" ).appendTo( this.button );
-		this._addClass( icon, "ui-selectmenu-icon", "ui-icon " + this.options.icons.button );
+		this.icon = $( "<span>" ).prependTo( this.button );
+		this._addClass( this.icon, "ui-selectmenu-icon", "ui-icon " + this.options.icons.button );
 
 		if ( this.options.width !== false ) {
 			this._resizeButton();
@@ -206,13 +205,8 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 
 	refresh: function() {
 		this._refreshMenu();
-		this.buttonItem.replaceWith(
-			this.buttonItem = this._renderButtonItem(
+		this.setButtonText( this._getSelectedItem().data( "ui-selectmenu-item" ) || {} );
 
-				// Fall back to an empty object in case there are no options
-				this._getSelectedItem().data( "ui-selectmenu-item" ) || {}
-			)
-		);
 		if ( this.options.width === null ) {
 			this._resizeButton();
 		}
@@ -308,7 +302,6 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 		var buttonItem = $( "<span>" );
 
 		this._setText( buttonItem, item.label );
-		this._addClass( buttonItem, "ui-selectmenu-text" );
 
 		return buttonItem;
 	},
@@ -519,12 +512,19 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 		}
 	},
 
+	setButtonText: function( item ) {
+		this._setText( this.button, item.label );
+		if ( this.icon ) {
+			this.button.prepend( this.icon );
+		}
+	},
+
 	_select: function( item, event ) {
 		var oldIndex = this.element[ 0 ].selectedIndex;
 
 		// Change native select element
 		this.element[ 0 ].selectedIndex = item.index;
-		this.buttonItem.replaceWith( this.buttonItem = this._renderButtonItem( item ) );
+		this.setButtonText( item );
 		this._setAria( item );
 		this._trigger( "select", event, { item: item } );