Skip to content

Commit 38cfcff

Browse files
committed
Menu: Update autocomplete to use deactivate and check for focus class
1 parent 5c687be commit 38cfcff

File tree

5 files changed

+44
-8
lines changed

5 files changed

+44
-8
lines changed

tests/unit/autocomplete/autocomplete_core.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ test( "prevent form submit on enter when menu is active", function() {
4949
event = $.Event( "keydown" );
5050
event.keyCode = $.ui.keyCode.DOWN;
5151
ac.trigger( event );
52-
same( $( ".ui-menu-item:has(.ui-state-hover)" ).length, 1, "menu item is active" );
52+
same( $( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" );
5353

5454
event = $.Event( "keydown" );
5555
event.keyCode = $.ui.keyCode.ENTER;

tests/visual/menu/menu.html

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
});
2525
}
2626

27-
var menus = $("#menu1, #menu2");
27+
var menus = $("#menu1, #menu2, #menu3");
2828
create();
2929

3030
$("#toggle-destroy").toggle(function() {
@@ -55,7 +55,24 @@
5555
<li><a href="#">Salzburg</a></li>
5656
</ul>
5757

58-
<ul id="menu2">
58+
<ul id="menu1">
59+
<li><a href="#">Aberdeen</a></li>
60+
<li><a href="#">Ada</a></li>
61+
<li><a href="#">Adamsville</a></li>
62+
<li><a href="#">Addyston</a></li>
63+
<li>
64+
<a href="#">Delphi</a>
65+
<ul>
66+
<li><a href="#">Ada</a></li>
67+
<li><a href="#">Saarland</a></li>
68+
<li><a href="#">Salzburg</a></li>
69+
</ul>
70+
</li>
71+
<li><a href="#">Saarland</a></li>
72+
<li><a href="#">Salzburg</a></li>
73+
</ul>
74+
75+
<ul id="menu3">
5976
<li><a href="#">Aberdeen</a></li>
6077
<li><a href="#">Ada</a></li>
6178
<li><a href="#">Adamsville</a></li>

themes/base/jquery.ui.menu.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,5 @@
3737
font-weight: normal;
3838
margin: -1px;
3939
}
40+
41+
.ui-menu .ui-icon { float: right; }

ui/jquery.ui.autocomplete.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ $.widget( "ui.autocomplete", {
323323
clearTimeout( this.closing );
324324
if ( this.menu.element.is(":visible") ) {
325325
this.menu.element.hide();
326-
this.menu.deactivate();
326+
this.menu.blur();
327327
this._trigger( "close", event );
328328
}
329329
},
@@ -358,8 +358,8 @@ $.widget( "ui.autocomplete", {
358358
.empty()
359359
.zIndex( this.element.zIndex() + 1 );
360360
this._renderMenu( ul, items );
361-
// TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate
362-
this.menu.deactivate();
361+
// TODO refresh should check if the active item is still in the dom, removing the need for a manual blur
362+
this.menu.blur();
363363
this.menu.refresh();
364364

365365
// size and position menu
@@ -400,7 +400,7 @@ $.widget( "ui.autocomplete", {
400400
if ( this.menu.first() && /^previous/.test(direction) ||
401401
this.menu.last() && /^next/.test(direction) ) {
402402
this._value( this.term );
403-
this.menu.deactivate();
403+
this.menu.blur();
404404
return;
405405
}
406406
this.menu[ direction ]( event );

ui/jquery.ui.menu.js

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ var idIncrement = 0;
1717

1818
$.widget("ui.menu", {
1919
defaultElement: "<ul>",
20+
options: {
21+
position: {
22+
my: "left top",
23+
at: "right top"
24+
}
25+
},
2026
_create: function() {
2127
var self = this;
2228
this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++;
@@ -145,8 +151,19 @@ $.widget("ui.menu", {
145151
},
146152

147153
refresh: function() {
154+
// initialize nested menus
155+
// TODO add role=listbox to these, too? or just the top level menu?
156+
var submenus = this.element.find("ul:not(.ui-menu)")
157+
.addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
158+
.hide()
159+
160+
submenus
161+
.prev("a")
162+
.prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
163+
164+
148165
// don't refresh list items that are already adapted
149-
var items = this.element.children( "li:not(.ui-menu-item):has(a)" )
166+
var items = submenus.add(this.element).children( "li:not(.ui-menu-item):has(a)" )
150167
.addClass( "ui-menu-item" )
151168
.attr( "role", "menuitem" );
152169

0 commit comments

Comments
 (0)