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

diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js
index fcd835d1ac12572e98283e50b0a597ae34d45e40..2edb8876c6130927124b2e8d3e0f9f9536c7db38 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_core.js
+++ b/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;

diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html
index 395a06bdfd630ce6f89887831774ccb5263315bb..32fb98ea8ed56cfed033b83fda05ea282e0823cd 100644 (file)
--- a/tests/visual/menu/menu.html
+++ b/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>

diff --git a/themes/base/jquery.ui.menu.css b/themes/base/jquery.ui.menu.css
index 1c868c36626f04b561b486b717df79582437bbb5..63299aea4a6e7c79787f125bb1e167b6b533fe95 100644 (file)
--- a/themes/base/jquery.ui.menu.css
+++ b/themes/base/jquery.ui.menu.css
@@ -37,3 +37,5 @@
        font-weight: normal;
        margin: -1px;
 }
+
+.ui-menu .ui-icon { float: right; }

diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index 32959b3c547a969462484eac5b1e018daec75803..c83f042c0a7080708967c27ec5f4fffc0e30ed5e 100644 (file)
--- a/ui/jquery.ui.autocomplete.js
+++ b/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 );

diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js
index d7c0f5c74f558089884c0820894dcb15d474d629..cba42d17f48217b9106c3a21e81a24c415b4134f 100644 (file)
--- a/ui/jquery.ui.menu.js
+++ b/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" );