Menu: Update autocomplete to use deactivate and check for focus class

Author: jzaefferer

tests/unit/autocomplete/autocomplete_core.js

@@ -49,7 +49,7 @@ test( "prevent form submit on enter when menu is active", function() {
 	event = $.Event( "keydown" );
 	event.keyCode = $.ui.keyCode.DOWN;
 	ac.trigger( event );
-	same( $( ".ui-menu-item:has(.ui-state-hover)" ).length, 1, "menu item is active" );
+	same( $( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" );
 
 	event = $.Event( "keydown" );
 	event.keyCode = $.ui.keyCode.ENTER;

tests/visual/menu/menu.html

@@ -24,7 +24,7 @@
 			});
 		}
 
-		var menus = $("#menu1, #menu2");
+		var menus = $("#menu1, #menu2, #menu3");
 		create();
 
 		$("#toggle-destroy").toggle(function() {
@@ -55,7 +55,24 @@
 	<li><a href="#">Salzburg</a></li>
 </ul>
 
-<ul id="menu2">
+<ul id="menu1">
+	<li><a href="#">Aberdeen</a></li>
+	<li><a href="#">Ada</a></li>
+	<li><a href="#">Adamsville</a></li>
+	<li><a href="#">Addyston</a></li>
+	<li>
+		<a href="#">Delphi</a>
+		<ul>
+			<li><a href="#">Ada</a></li>
+			<li><a href="#">Saarland</a></li>
+			<li><a href="#">Salzburg</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Saarland</a></li>
+	<li><a href="#">Salzburg</a></li>
+</ul>
+
+<ul id="menu3">
 	<li><a href="#">Aberdeen</a></li>
 	<li><a href="#">Ada</a></li>
 	<li><a href="#">Adamsville</a></li>

themes/base/jquery.ui.menu.css

@@ -37,3 +37,5 @@
 	font-weight: normal;
 	margin: -1px;
 }
+
+.ui-menu .ui-icon { float: right; }

ui/jquery.ui.autocomplete.js

@@ -323,7 +323,7 @@ $.widget( "ui.autocomplete", {
 		clearTimeout( this.closing );
 		if ( this.menu.element.is(":visible") ) {
 			this.menu.element.hide();
-			this.menu.deactivate();
+			this.menu.blur();
 			this._trigger( "close", event );
 		}
 	},
@@ -358,8 +358,8 @@ $.widget( "ui.autocomplete", {
 			.empty()
 			.zIndex( this.element.zIndex() + 1 );
 		this._renderMenu( ul, items );
-		// TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate
-		this.menu.deactivate();
+		// TODO refresh should check if the active item is still in the dom, removing the need for a manual blur
+		this.menu.blur();
 		this.menu.refresh();
 
 		// size and position menu
@@ -400,7 +400,7 @@ $.widget( "ui.autocomplete", {
 		if ( this.menu.first() && /^previous/.test(direction) ||
 				this.menu.last() && /^next/.test(direction) ) {
 			this._value( this.term );
-			this.menu.deactivate();
+			this.menu.blur();
 			return;
 		}
 		this.menu[ direction ]( event );

ui/jquery.ui.menu.js

@@ -17,6 +17,12 @@ var idIncrement = 0;
 
 $.widget("ui.menu", {
 	defaultElement: "<ul>",
+	options: {
+		position: {
+			my: "left top",
+			at: "right top"
+		}
+	},
 	_create: function() {
 		var self = this;
 		this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
@@ -145,8 +151,19 @@ $.widget("ui.menu", {
 	},
 
 	refresh: function() {
+		// initialize nested menus
+		// TODO add role=listbox to these, too? or just the top level menu?
+		var submenus = this.element.find("ul:not(.ui-menu)")
+			.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
+			.hide()
+		
+		submenus
+			.prev("a")
+			.prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
+		
+		
 		// don't refresh list items that are already adapted
-		var items = this.element.children( "li:not(.ui-menu-item):has(a)" )
+		var items = submenus.add(this.element).children( "li:not(.ui-menu-item):has(a)" )
 			.addClass( "ui-menu-item" )
 			.attr( "role", "menuitem" );