Skip to content

Commit fe7ca1f

Browse files
kborcherskborchers
committed
Menu: Better handling of divider elements and menu items without anchors.
1 parent f63bb4f commit fe7ca1f

File tree

5 files changed

+83
-13
lines changed

5 files changed

+83
-13
lines changed

‎tests/unit/menu/menu.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,11 @@ <h2 id="qunit-userAgent"></h2>
8888
<a href="#">Delphi</a>
8989
<ul>
9090
<li class="foo"><a class="foo" href="#">Ada</a></li>
91+
<li> - </li>
9192
<li class="foo"><a class="foo" href="#">Saarland</a></li>
93+
<li></li>
9294
<li class="foo"><a class="foo" href="#">Salzburg</a></li>
95+
<li>&ndash;</li>
9396
</ul>
9497
</li>
9598
<li class="foo"><a class="foo" href="#">Perch</a></li>

‎tests/unit/menu/menu_events.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -315,16 +315,27 @@ asyncTest("handle keyboard navigation on menu without scroll and with submenus",
315315
equal( $("#log").html(), "4,keydown,", "Keydown ESCAPE (close submenu)");
316316

317317
log("keydown",true);
318-
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
319-
setTimeout( menukeyboard5, 50 );
318+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
319+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
320+
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
321+
setTimeout( function() {
322+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
323+
element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
324+
setTimeout( function() {
325+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
326+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
327+
element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
328+
equal( $("#log").html(), "0,4,2,0,1,0,6,5,keydown,", "Keydown skip dividers and items without anchors");
329+
330+
log("keydown",true);
331+
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
332+
setTimeout( menukeyboard6, 50 );
333+
}, 50 );
334+
}, 50 );
320335
}
321336

322-
function menukeyboard5() {
323-
equal( $("#log").html(), "0,keydown,", "Keydown ENTER (open submenu)");
324-
325-
log("keydown",true);
326-
element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
327-
equal( $("#log").html(), "Ada,keydown,", "Keydown ENTER (select item)");
337+
function menukeyboard6() {
338+
equal( $("#log").html(), "Ada,keydown,", "Keydown ENTER (open submenu)");
328339

329340
start();
330341
}

‎tests/unit/menu/menu_methods.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,17 @@ test( "enable/disable", function() {
2929
});
3030

3131
test( "refresh", function() {
32-
expect( 3 );
32+
expect( 5 );
3333
var menu = $( "#menu1" ).menu();
3434
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
3535
menu.append("<li><a href='#'>test item</a></li>").menu("refresh");
3636
equal(menu.find(".ui-menu-item").length,6,"Incorrect number of menu items");
3737
menu.find(".ui-menu-item:last").remove().end().menu("refresh");
3838
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
39+
menu.append("<li>---</li>").menu("refresh");
40+
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
41+
menu.children(":last").remove().end().menu("refresh");
42+
equal(menu.find(".ui-menu-item").length,5,"Incorrect number of menu items");
3943
});
4044

4145
test("destroy", function() {

‎tests/visual/menu/menu.html‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
1616
}
1717

18-
$( "#menu1, #menu2, #menu3, .menu4" ).menu({
18+
$( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({
1919
select: logger
2020
});
2121

@@ -58,7 +58,6 @@ <h2>Inline with disabled items and submenus</h2>
5858
<li><a href="#">Ada</a></li>
5959
<li><a href="#">Adamsville</a></li>
6060
<li><a href="#">Addyston</a></li>
61-
<li></li>
6261
<li>
6362
<a href="#">Delphi</a>
6463
<ul>
@@ -257,6 +256,54 @@ <h2>Menu with custom markup, multi-line items</h2>
257256
</div>
258257
</div>
259258

259+
<h2>Inline with dividers and elements without anchors</h2>
260+
<ul id="menu7">
261+
<li>Group 1</li>
262+
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
263+
<li><a href="#">Ada</a></li>
264+
<li><a href="#">Adamsville</a></li>
265+
<li><a href="#">Addyston</a></li>
266+
<li></li>
267+
<li>Group 2</li>
268+
<li>
269+
<a href="#">Delphi</a>
270+
<ul>
271+
<li class="ui-state-disabled"><a href="#">Ada</a></li>
272+
<li><a href="#">Saarland</a></li>
273+
<li><a href="#">Salzburg</a></li>
274+
</ul>
275+
</li>
276+
<li><a href="#">Saarland</a></li>
277+
<li>---</li>
278+
<li>Group 3</li>
279+
<li>
280+
<a href="#">Salzburg</a>
281+
<ul>
282+
<li>
283+
<a href="#">Delphi</a>
284+
<ul>
285+
<li><a href="#">Ada</a></li>
286+
<li> - </li>
287+
<li><a href="#">Saarland</a></li>
288+
<li>&mdash;</li>
289+
<li><a href="#">Salzburg</a></li>
290+
<li>&ndash;</li>
291+
</ul>
292+
</li>
293+
<li>
294+
<a href="#">Delphi</a>
295+
<ul>
296+
<li><a href="#">Ada</a></li>
297+
<li><a href="#">Saarland</a></li>
298+
<li><a href="#">Salzburg</a></li>
299+
</ul>
300+
</li>
301+
<li><a href="#">Perch</a></li>
302+
</ul>
303+
</li>
304+
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
305+
</ul>
306+
260307
<div style="position: absolute; top: 1em; right: 1em;">
261308
Log:
262309
<div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>

‎ui/jquery.ui.menu.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -299,8 +299,13 @@ $.widget( "ui.menu", {
299299
}
300300
});
301301

302-
// initialize unlinked menu-items as dividers
303-
menus.children( ":not(.ui-menu-item)" ).addClass( "ui-widget-content ui-menu-divider" );
302+
// initialize unlinked menu-items containing spaces and/or dashes only as dividers
303+
menus.children( ":not(.ui-menu-item)" ).each( function() {
304+
var item = $( this );
305+
if ( !/[^\-—–\s]/.test( item.text() ) ) {
306+
item.addClass( "ui-widget-content ui-menu-divider" );
307+
}
308+
});
304309

305310
// add aria-disabled attribute to any disabled menu item
306311
menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );

0 commit comments

Comments
 (0)