Skip to content
Permalink
Browse files

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

  • Loading branch information...
jzaefferer committed Feb 24, 2011
1 parent 5c687be commit 38cfcfffe92f2ac2572ab7ebc51e860de9312baf
@@ -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;
@@ -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>
@@ -37,3 +37,5 @@
font-weight: normal;
margin: -1px;
}

.ui-menu .ui-icon { float: right; }
@@ -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 );
@@ -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" );

0 comments on commit 38cfcff

Please sign in to comment.
You can’t perform that action at this time.