Selectmenu: Fixed selectmenu icon float right

Also removes the icon space as its not needed with a floated icon

Fixes #14914
Closes jquerygh-1671

Author: arschmitz

tests/unit/selectmenu/core.js

@@ -6,18 +6,22 @@ define( [
 module( "selectmenu: core" );
 
 test( "markup structure", function( assert ) {
-	expect( 4 );
+	expect( 7 );
 
 	var element = $( "#files" ).selectmenu(),
 		button = element.selectmenu( "widget" ),
+		icon = button.find( ".ui-icon" ),
 		menu = element.selectmenu( "menuWidget" ),
 		menuWrap = menu.parent();
 
+	assert.strictEqual( icon.length, 1, "Exactly one icon exists" );
+	assert.hasClasses( icon, "ui-selectmenu-icon" );
 	assert.hasClasses( button,
 		"ui-selectmenu-button ui-selectmenu-button-closed ui-widget" );
 	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" );
 } );
 
 asyncTest( "accessibility", function() {

themes/base/selectmenu.css

@@ -40,3 +40,7 @@
 	white-space: nowrap;
 	width: 14em;
 }
+.ui-selectmenu-icon.ui-icon {
+	float: right;
+	margin-top: 0;
+}

ui/widgets/selectmenu.js

@@ -84,7 +84,7 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 	},
 
 	_drawButton: function() {
-		var icon, space,
+		var icon,
 			that = this,
 			item = this._parseOption(
 				this.element.find( "option:selected" ),
@@ -119,15 +119,12 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
 		this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
 			"ui-button ui-widget" );
 
-		icon = $( "<span>" ).prependTo( this.button );
-		space = $( "<span> </span>" );
-		this._addClass( space, "ui-selectmenu-icon-space" );
-		this._addClass( icon, null, "ui-icon " + this.options.icons.button );
-		icon.after( space );
-
 		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 );
+
 		if ( this.options.width !== false ) {
 			this._resizeButton();
 		}