Selectmenu: Better handling when there are no options

Fixes #10662 Closes jquerygh-1370 Closes jquerygh-1423

Author: scottgonzalez

tests/unit/selectmenu/selectmenu_methods.js

@@ -154,6 +154,20 @@ test( "refresh - disabled optgroup", function() {
 }
 });
 
+test( "refresh - remove all options", function() {
+expect( 2 );
+
+var element = $( "#speed" ).selectmenu(),
+button = element.selectmenu( "widget" ),
+menu = element.selectmenu( "menuWidget" );
+
+element.children().remove();
+element.selectmenu( "refresh" );
+equal( button.find( ".ui-selectmenu-text" ).html(), $( "<span>&#160;</span>" ).html(),
+"Empty button text" );
+equal( menu.children().length, 0, "Empty menu" );
+});
+
 test( "widget and menuWidget", function() {
 expect( 4 );
 

ui/selectmenu.js

@@ -66,6 +66,9 @@ return $.widget( "ui.selectmenu", {
 this._drawButton();
 this._drawMenu();
 
+this._rendered = false;
+this.menuItems = $();
+
 if ( this.options.disabled ) {
 this.disable();
 }
@@ -119,7 +122,7 @@ return $.widget( "ui.selectmenu", {
 
 // Delay rendering the menu items until the button receives focus.
 // The menu may have already been rendered via a programmatic open.
-if ( !that.menuItems ) {
+if ( !that._rendered ) {
 that._refreshMenu();
 }
 });
@@ -199,7 +202,9 @@ return $.widget( "ui.selectmenu", {
 this._refreshMenu();
 this.buttonItem.replaceWith(
 this.buttonItem = this._renderButtonItem(
-this._getSelectedItem().data( "ui-selectmenu-item" )
+
+// Fall back to an empty object in case there are no options
+this._getSelectedItem().data( "ui-selectmenu-item" ) || {}
 )
 );
 if ( !this.options.width ) {
@@ -208,14 +213,10 @@ return $.widget( "ui.selectmenu", {
 },
 
 _refreshMenu: function() {
-this.menu.empty();
-
 var item,
 options = this.element.find( "option" );
 
-if ( !options.length ) {
-return;
-}
+this.menu.empty();
 
 this._parseOptions( options );
 this._renderMenu( this.menu, this.items );
@@ -225,6 +226,12 @@ return $.widget( "ui.selectmenu", {
 .not( ".ui-selectmenu-optgroup" )
 .find( ".ui-menu-item-wrapper" );
 
+this._rendered = true;
+
+if ( !options.length ) {
+return;
+}
+
 item = this._getSelectedItem();
 
 // Update the menu to have the correct item focused
@@ -241,7 +248,7 @@ return $.widget( "ui.selectmenu", {
 }
 
 // If this is the first time the menu is being opened, render the items
-if ( !this.menuItems ) {
+if ( !this._rendered ) {
 this._refreshMenu();
 } else {
 
@@ -250,6 +257,11 @@ return $.widget( "ui.selectmenu", {
 this.menuInstance.focus( null, this._getSelectedItem() );
 }
 
+// If there are no options, don't open the menu
+if ( !this.menuItems.length ) {
+return;
+}
+
 this.isOpen = true;
 this._toggleAttr();
 this._resizeMenu();