Selectmenu: Support `width: false` and default to 14em

`width: null` still matches the width of the original element.
`width: false` prevents an inline style from being set for the width. This
makes it easy to set the width via a stylesheet and allows the use of any
unit for setting the width, such as the new default of `14em`.

Fixes #11198
Closes gh-1467

diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html
index 9329b81b13aaa40d0eed607e8bd5f786eb4be969..ec0b4b6d5d3e8c5905731399b8f826f4a0b2c7ea 100644 (file)
--- a/demos/selectmenu/custom_render.html
+++ b/demos/selectmenu/custom_render.html
@@ -59,9 +59,6 @@
                label {
                        display: block;
                }
-               select {
-                       width: 200px;
-               }
 
                /* select with custom icons */
                .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {

diff --git a/demos/selectmenu/default.html b/demos/selectmenu/default.html
index d9b19868318cc6b59ddb51b6c708236bfdfb640f..a845b1dbabdb2b4ae6865a7e6fcf26747bd85b73 100644 (file)
--- a/demos/selectmenu/default.html
+++ b/demos/selectmenu/default.html
@@ -32,9 +32,6 @@
                        display: block;
                        margin: 30px 0 0 0;
                }
-               select {
-                       width: 200px;
-               }
                .overflow {
                        height: 200px;
                }

diff --git a/demos/selectmenu/product-selection.html b/demos/selectmenu/product-selection.html
index 40b3a921d569d14c7de11a5da8da55e409de7c38..e759ea36a4040b9240cc038be9647447edbb5bc9 100644 (file)
--- a/demos/selectmenu/product-selection.html
+++ b/demos/selectmenu/product-selection.html
@@ -41,9 +41,6 @@
                        display: block;
                        margin: 20px 0 0 0;
                }
-               select {
-                       width: 200px;
-               }
 
                #circle {
                        float: left;

diff --git a/tests/unit/selectmenu/selectmenu_common.js b/tests/unit/selectmenu/selectmenu_common.js
index 10073fe97beb418f08fa6d9a41157f9cf87e9c10..bc245f9626647e75f86dbd1f517ac5194ceff612 100644 (file)
--- a/tests/unit/selectmenu/selectmenu_common.js
+++ b/tests/unit/selectmenu/selectmenu_common.js
@@ -10,7 +10,7 @@ TestHelpers.commonWidgetTests( "selectmenu", {
                        at: "left bottom",
                        collision: "none"
                },
-               width: null,
+               width: false,
 
                // callbacks
                change: null,

diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js
index 954d572b54628853b1f3e5fa3094a35be8683de5..08555a1afcb400d10a5a7f9dbb638966d26f6152 100644 (file)
--- a/tests/unit/selectmenu/selectmenu_options.js
+++ b/tests/unit/selectmenu/selectmenu_options.js
@@ -85,7 +85,7 @@ test( "CSS styles", function() {
 });
 
 test( "width", function() {
-       expect( 5 );
+       expect( 6 );
 
        var button,
                element = $( "#speed" );
@@ -93,6 +93,9 @@ test( "width", function() {
        element.selectmenu();
        button = element.selectmenu( "widget" );
 
+       equal( button[ 0 ].style.width, "", "no inline style" );
+
+       element.selectmenu( "option", "width", null );
        equal( button.outerWidth(), element.outerWidth(), "button width auto" );
 
        element.outerWidth( 100 );
@@ -107,7 +110,7 @@ test( "width", function() {
 
        element
                .append( $( "<option>", { text: "Option with a little longer text" } ) )
-               .selectmenu( "option", "width", "" )
+               .selectmenu( "option", "width", null )
                .selectmenu( "refresh" );
        equal( button.outerWidth(), element.outerWidth(), "button width with long option" );
 
@@ -115,7 +118,7 @@ test( "width", function() {
        element
                .selectmenu( "destroy" )
                .css( "width", "100%" )
-               .selectmenu();
+               .selectmenu({ width: null });
        button = element.selectmenu( "widget" );
        equal( button.outerWidth(), 300, "button width fills container" );
 });

diff --git a/themes/base/selectmenu.css b/themes/base/selectmenu.css
index be4819a1abcc320db83cd3136bfa213487ad958b..178d7037fb681d54a3d7a8e15aece9e8c16ba588 100644 (file)
--- a/themes/base/selectmenu.css
+++ b/themes/base/selectmenu.css
@@ -39,6 +39,7 @@
        position: relative;
        text-decoration: none;
        cursor: pointer;
+       width: 14em;
 }
 .ui-selectmenu-button span.ui-icon {
        right: 0.5em;

diff --git a/ui/selectmenu.js b/ui/selectmenu.js
index 68cbbbfbfb0dd3e9e0b16f21bb275581a8fd3aeb..9bd2d1016a76d1fe3a13f4b7358576d833ef6c3b 100644 (file)
--- a/ui/selectmenu.js
+++ b/ui/selectmenu.js
@@ -48,7 +48,7 @@ return $.widget( "ui.selectmenu", {
                        at: "left bottom",
                        collision: "none"
                },
-               width: null,
+               width: false,
 
                // callbacks
                change: null,
@@ -118,7 +118,9 @@ return $.widget( "ui.selectmenu", {
                this.buttonItem = this._renderButtonItem( item )
                        .appendTo( this.button );
 
-               this._resizeButton();
+               if ( this.options.width !== false ) {
+                       this._resizeButton();
+               }
 
                this._on( this.button, this._buttonEvents );
                this.button.one( "focusin", function() {
@@ -210,7 +212,7 @@ return $.widget( "ui.selectmenu", {
                                this._getSelectedItem().data( "ui-selectmenu-item" ) || {}
                        )
                );
-               if ( !this.options.width ) {
+               if ( this.options.width === null ) {
                        this._resizeButton();
                }
        },
@@ -603,7 +605,14 @@ return $.widget( "ui.selectmenu", {
        _resizeButton: function() {
                var width = this.options.width;
 
-               if ( !width ) {
+               // For `width: false`, just remove inline style and stop
+               if ( width === false ) {
+                       this.button.css( "width", "" );
+                       return;
+               }
+
+               // For `width: null`, match the width of the original element
+               if ( width === null ) {
                        width = this.element.show().outerWidth();
                        this.element.hide();
                }