From bff8277fbc885bf2dc0461ac706d2f2bb7035ad6 Mon Sep 17 00:00:00 2001
From: Alexander Schmitz <arschmitz@gmail.com>
Date: Wed, 30 Mar 2016 11:38:34 -0400
Subject: [PATCH] Selectmenu: Prepend icon and move overflow to text span

Fixes #14938
Closes gh-1685
---
 tests/unit/selectmenu/core.js | 2 +-
 themes/base/selectmenu.css    | 8 ++++++--
 ui/widgets/selectmenu.js      | 5 ++---
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js
index 3c2b4936d..5fd47d7f1 100644
--- a/tests/unit/selectmenu/core.js
+++ b/tests/unit/selectmenu/core.js
@@ -21,7 +21,7 @@ test( "markup structure", function( assert ) {
 	assert.lacksClasses( button, "ui-selectmenu-button-open ui-selectmenu-open" );
 	assert.hasClasses( menuWrap, "ui-selectmenu-menu" );
 	assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" );
-	assert.strictEqual( icon[ 0 ], button.children().last()[ 0 ], "Icon is last child of button" );
+	assert.strictEqual( icon[ 0 ], button.children()[ 0 ], "Icon is first child of button" );
 } );
 
 asyncTest( "accessibility", function() {
diff --git a/themes/base/selectmenu.css b/themes/base/selectmenu.css
index 65a2adfbf..3299f9e4d 100644
--- a/themes/base/selectmenu.css
+++ b/themes/base/selectmenu.css
@@ -33,10 +33,14 @@
 .ui-selectmenu-open {
 	display: block;
 }
-.ui-selectmenu-button.ui-button {
-	text-align: left;
+.ui-selectmenu-text {
+	display: block;
+	margin-right: 20px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+}
+.ui-selectmenu-button.ui-button {
+	text-align: left;
 	white-space: nowrap;
 	width: 14em;
 }
diff --git a/ui/widgets/selectmenu.js b/ui/widgets/selectmenu.js
index fa7f87e94..87f88623f 100644
--- a/ui/widgets/selectmenu.js
+++ b/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 );
-
 		icon = $( "<span>" ).appendTo( this.button );
 		this._addClass( icon, "ui-selectmenu-icon", "ui-icon " + this.options.icons.button );
+		this.buttonItem = this._renderButtonItem( item )
+			.appendTo( this.button );
 
 		if ( this.options.width !== false ) {
 			this._resizeButton();