Selectmenu: Properly set width for button

Fixes #10145
Closes gh-1296

diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js
index 25448fd403d315a066f9bc07f9cf4340fc5d950b..ae847f5e1ab2917d2673a6bffbaa6794e82d9c38 100644 (file)
--- a/tests/unit/selectmenu/selectmenu_options.js
+++ b/tests/unit/selectmenu/selectmenu_options.js
@@ -86,8 +86,8 @@ test( "CSS styles", function() {
 });
 
 
-test( "Width", function() {
-       expect( 8 );
+test( "width", function() {
+       expect( 9 );
 
        var button, menu,
                element = $( "#speed" );
@@ -124,6 +124,14 @@ test( "Width", function() {
        equal( button.outerWidth(), element.outerWidth(), "button width with long option" );
        element.selectmenu( "open" );
        ok( menu.outerWidth() >= element.outerWidth(), "menu width with long option" );
+
+       element.parent().outerWidth( 300 );
+       element
+               .selectmenu( "destroy" )
+               .css( "width", "100%" )
+               .selectmenu();
+       button = element.selectmenu( "widget" );
+       equal( button.outerWidth(), 300, "button width fills container" );
 });
 
 })( jQuery );

diff --git a/ui/selectmenu.js b/ui/selectmenu.js
index 2107285fe36a8bb48331ec6f72d7ee4a1b6aaef7..0b47feb534080281073822221c1f0485beb0ca14 100644 (file)
--- a/ui/selectmenu.js
+++ b/ui/selectmenu.js
@@ -106,7 +106,7 @@ return $.widget( "ui.selectmenu", {
                        .appendTo( this.button );
 
                this._setText( this.buttonText, this.element.find( "option:selected" ).text() );
-               this._setOption( "width", this.options.width );
+               this._resizeButton();
 
                this._on( this.button, this._buttonEvents );
                this.button.one( "focusin", function() {
@@ -186,7 +186,9 @@ return $.widget( "ui.selectmenu", {
        refresh: function() {
                this._refreshMenu();
                this._setText( this.buttonText, this._getSelectedItem().text() );
-               this._setOption( "width", this.options.width );
+               if ( !this.options.width ) {
+                       this._resizeButton();
+               }
        },
 
        _refreshMenu: function() {
@@ -475,10 +477,7 @@ return $.widget( "ui.selectmenu", {
                }
 
                if ( key === "width" ) {
-                       if ( !value ) {
-                               value = this.element.outerWidth();
-                       }
-                       this.button.outerWidth( value );
+                       this._resizeButton();
                }
        },
 
@@ -511,6 +510,17 @@ return $.widget( "ui.selectmenu", {
                this.menu.attr( "aria-hidden", !this.isOpen );
        },
 
+       _resizeButton: function() {
+               var width = this.options.width;
+
+               if ( !width ) {
+                       width = this.element.show().outerWidth();
+                       this.element.hide();
+               }
+
+               this.button.outerWidth( width );
+       },
+
        _resizeMenu: function() {
                this.menu.outerWidth( Math.max(
                        this.button.outerWidth(),