diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js index 1c1a6b622..3c2b4936d 100644 --- a/tests/unit/selectmenu/core.js +++ b/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() { diff --git a/themes/base/selectmenu.css b/themes/base/selectmenu.css index 3449c19b5..65a2adfbf 100644 --- a/themes/base/selectmenu.css +++ b/themes/base/selectmenu.css @@ -40,3 +40,7 @@ white-space: nowrap; width: 14em; } +.ui-selectmenu-icon.ui-icon { + float: right; + margin-top: 0; +} diff --git a/ui/widgets/selectmenu.js b/ui/widgets/selectmenu.js index b251f04f1..fa7f87e94 100644 --- a/ui/widgets/selectmenu.js +++ b/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 = $( "" ).prependTo( this.button ); - space = $( " " ); - 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 = $( "" ).appendTo( this.button ); + this._addClass( icon, "ui-selectmenu-icon", "ui-icon " + this.options.icons.button ); + if ( this.options.width !== false ) { this._resizeButton(); }