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

Author: scottgonzalez

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 {

demos/selectmenu/default.html

@@ -32,9 +32,6 @@
 			display: block;
 			margin: 30px 0 0 0;
 		}
-		select {
-			width: 200px;
-		}
 		.overflow {
 			height: 200px;
 		}

demos/selectmenu/product-selection.html

@@ -41,9 +41,6 @@
 			display: block;
 			margin: 20px 0 0 0;
 		}
-		select {
-			width: 200px;
-		}
 
 		#circle {
 			float: left;

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,

tests/unit/selectmenu/selectmenu_options.js

@@ -85,14 +85,17 @@ test( "CSS styles", function() {
 });
 
 test( "width", function() {
-	expect( 5 );
+	expect( 6 );
 
 	var button,
 		element = $( "#speed" );
 
 	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,15 +110,15 @@ 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" );
 
 	element.parent().outerWidth( 300 );
 	element
 		.selectmenu( "destroy" )
 		.css( "width", "100%" )
-		.selectmenu();
+		.selectmenu({ width: null });
 	button = element.selectmenu( "widget" );
 	equal( button.outerWidth(), 300, "button width fills container" );
 });

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;

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();
 		}