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

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