This avoids styling issues where ui-state-focus rules apply to submenus. Fixes #10162 Closes gh-1342 --- demos/menu/categories.html | 16 +- demos/menu/default.html | 40 +-- demos/menu/icons.html | 38 ++- tests/unit/menu/menu.html | 397 ++++++++++++++------------- tests/unit/menu/menu_common.js | 2 +- tests/unit/menu/menu_core.js | 7 +- tests/unit/menu/menu_events.js | 24 +- tests/unit/menu/menu_methods.js | 5 +- tests/unit/menu/menu_options.js | 18 +- tests/unit/menu/menu_test_helpers.js | 4 +- tests/visual/menu/menu.html | 357 +++++++++++++----------- themes/base/menu.css | 8 +- ui/menu.js | 62 +++-- 13 files changed, 543 insertions(+), 435 deletions(-) diff --git a/demos/menu/categories.html b/demos/menu/categories.html index c0e55d05a..213e97a4e 100644 --- a/demos/menu/categories.html +++ b/demos/menu/categories.html @@ -25,14 +25,14 @@

diff --git a/demos/menu/default.html b/demos/menu/default.html index 6da41e016..6c23c4e22 100644 --- a/demos/menu/default.html +++ b/demos/menu/default.html @@ -22,38 +22,38 @@

Aberdeen
Ada
Adamsville
Addyston
Delphi +
Aberdeen
Ada
Adamsville
Addyston
Delphi
- Ada
- Saarland
- Salzburg an der schÃ¶nen Donau
- Ada
- Saarland
- Salzburg an der schÃ¶nen Donau
Saarland
Salzburg +
Saarland
Salzburg
- Delphi +
- Delphi
  - Ada
  - Saarland
  - Salzburg
  - Ada
  - Saarland
  - Salzburg
- Delphi +
- Delphi
  - Ada
  - Saarland
  - Salzburg
  - Ada
  - Saarland
  - Salzburg
- Perch
- Perch
Amesville
Amesville

diff --git a/demos/menu/icons.html b/demos/menu/icons.html index bd1de828e..1afdba5e1 100644 --- a/demos/menu/icons.html +++ b/demos/menu/icons.html @@ -22,20 +22,38 @@

diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html index cb3df5b00..56115c334 100644 --- a/tests/unit/menu/menu.html +++ b/tests/unit/menu/menu.html @@ -33,7 +33,7 @@ font-size: 15px; line-height: 15px; } - .ui-menu .ui-menu-item { + .ui-menu .ui-menu-item-wrapper { padding: 0; } #menu3 { @@ -52,263 +52,284 @@

Aberdeen
Ada
Adamsville
Addyston
Adelphi
Aberdeen
Ada
Adamsville
Addyston
Adelphi

Aberdeen
Ada
Adamsville
Addyston
Delphi +
Aberdeen
Ada
Adamsville
+
Addyston
+
+
Delphi
- Ada
- Saarland
- Salzburg
- Ada
- Saarland
- Salzburg
Saarland
Salzburg +
Saarland
+
Salzburg
- Delphi +
- +
  Delphi
  - Ada
  - Saarland
  - Salzburg
  - Ada
  - Saarland
  - Salzburg
- Delphi +
- +
  Delphi
  - Ada
  - Ada
  - -
  - Saarland
  - Saarland
  - Salzburg
  - Salzburg
  - –
- Perch
- Perch

Aberdeen
Ada
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville
Aberdeen
Ada
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville
Aberdeen
Ada
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville
Aberdeen
Ada
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville

Aberdeen
Aberdeen
- Ada +
Ada
- Aberdeen
- Ada
- Adamsville
- Addyston
- Adelphi
- Adena
- Adrian
- Akron
- Albany
- Alexandria
- Alger
- Alledonia
- Alliance
- Alpha
- Alvada
- Alvordton
- Amanda
- Amelia
- Amesville
- Aberdeen
- Ada
- Adamsville
- Addyston
- Adelphi
- Adena
- Adrian
- Akron
- Albany
- Aberdeen
- Ada
- Adamsville
- Addyston
- Adelphi
- Adena
- Adrian
- Akron
- Albany
- Alexandria
- Alger
- Alledonia
- Alliance
- Alpha
- Alvada
- Alvordton
- Amanda
- Amelia
- Amesville
- Aberdeen
- Ada
- Adamsville
- Addyston
- Adelphi
- Adena
- Adrian
- Akron
- Albany
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville
Aberdeen
Ada
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville
Aberdeen
Ada
Adamsville
Addyston
Adelphi
Adena
Adrian
Akron
Albany
Alexandria
Alger
Alledonia
Alliance
Alpha
Alvada
Alvordton
Amanda
Amelia
Amesville

Aberdeen

Ada

Adamsville

Addyston

Delphi -
-
Ada
-
Saarland
-
Salzburg
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston
+
+
Delphi
+
+
Ada
+
Saarland
+
Salzburg

-
Saarland
-
Salzburg -
-
Delphi -
-
Ada
+
Saarland
+
+
Salzburg
+
+
+
Delphi
+
+
Ada

Saarland
-
Salzburg
+
Salzburg

-
Delphi -
-
Ada
-
Saarland
-
Salzburg
+
+
Delphi
+
+
Ada
+
Saarland
+
Salzburg

-
Perch
+
Perch

-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
-
Delphi +
Aberdeen
+
Ada
+
Adamsville
+
Addyston
+
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Saarland
+
Saarland

-
Group 1
-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
+
+
Group 1
+
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston

-
Group 2
-
Delphi +
+
Group 2
+
+
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Saarland
+
Saarland

---
-
Group 3
-
Salzburg +
+
Group 3
+
+
+
Salzburg

-
Delphi +
+
Delphi

-
Ada
+
Ada

-
-
Saarland
+
Saarland

—
-
Salzburg
+
Salzburg

–

-
Delphi +
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Perch
+
Perch

-
Amesville
+
Amesville

-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston

-
-
-Saarland
+
-Saarland

diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index 099dd091e..2404ebe02 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -7,7 +7,7 @@ TestHelpers.commonWidgetTests( "menu", { items: "> *", menus: "ul", position: { - my: "left-1 top", + my: "left top", at: "right top" }, role: "menu", diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index df039c9e4..f02f97fca 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -48,12 +48,13 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function() { expect( 1 ); var element = $( "#menu1" ).menu(), - firstChild = element.children().eq( 0 ); + firstChild = element.children().eq( 0 ), + wrapper = firstChild.children( ".ui-menu-item-wrapper" ); element.menu( "focus", null, firstChild ); - firstChild.addClass( "ui-state-active" ); + wrapper.addClass( "ui-state-active" ); setTimeout( function() { - ok( firstChild.is( ".ui-state-active" ), "ui-state-active improperly removed" ); + ok( wrapper.is( ".ui-state-active" ), "ui-state-active improperly removed" ); start(); }, 500 ); }); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 02e63bf63..f4d494f47 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -32,7 +32,7 @@ test( "handle click on custom item menu", function() { select: function() { log(); }, - menus: "div" + menus: ".menu" }); log( "click", true ); click( element, "1" ); @@ -91,7 +91,7 @@ asyncTest( "handle focus of menu with active item", function() { expect( 1 ); var element = $( "#menu1" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -142,12 +142,12 @@ asyncTest( "handle submenu auto collapse: mouseleave", function() { asyncTest( "handle submenu auto collapse: mouseleave", function() { expect( 4 ); - var element = $( "#menu5" ).menu({ menus: "div" }), + var element = $( "#menu5" ).menu({ menus: ".menu" }), event = $.Event( "mouseenter" ); function menumouseleave1() { equal( element.find( "div[aria-expanded='true']" ).length, 1, "first submenu expanded" ); - element.menu( "focus", event, element.find( ":nth-child(7)" ).find( "div" ).eq( 0 ).children().eq( 0 ) ); + element.menu( "focus", event, element.find( ":nth-child(7)" ).find( ".menu" ).eq( 0 ).children().eq( 0 ) ); setTimeout( menumouseleave2, 350 ); } function menumouseleave2() { @@ -177,7 +177,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -243,7 +243,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -363,7 +363,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus" log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -438,7 +438,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().index()); } }); @@ -533,7 +533,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().index()); } }); @@ -585,7 +585,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index()); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -612,7 +612,7 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function() expect( 3 ); var element = $( "#menu2" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); @@ -635,7 +635,7 @@ asyncTest( "Keep focus on selected item (see #10644)", function() { expect( 1 ); var element = $( "#menu2" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).index() ); + log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); } }); diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js index 5a633998d..ef8279018 100644 --- a/tests/unit/menu/menu_methods.js +++ b/tests/unit/menu/menu_methods.js @@ -73,11 +73,12 @@ test( "refresh icons (see #9377)", function() { expect( 3 ); var element = $( "#menu1" ).menu(); ok( !element.hasClass( "ui-menu-icons") ); - element.find( "li:first" ).html( "Save" ); + element.find( "li:first .ui-menu-item-wrapper" ) + .html( "Save" ); element.menu( "refresh" ); ok( element.hasClass( "ui-menu-icons" ) ); - element.find( "li:first" ).html( "Save" ); + element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" ); element.menu( "refresh" ); ok( !element.hasClass( "ui-menu-icons" ) ); }); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js index c76673345..438b02a32 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/menu_options.js @@ -71,8 +71,10 @@ test( "{ role: 'menu' } ", function() { ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); - equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), + "menuitem", "menu item ("+ item + ") role" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", + "tabindex for menu item ("+ item + ")" ); }); }); @@ -86,8 +88,10 @@ test( "{ role: 'listbox' } ", function() { ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" ); - equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "option", + "menu item ("+ item + ") role" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", + "tabindex for menu item ("+ item + ")" ); }); }); @@ -101,8 +105,10 @@ test( "{ role: null }", function() { ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" ); - equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), undefined, + "menu item ("+ item + ") role" ); + equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", + "tabindex for menu item ("+ item + ")" ); }); }); diff --git a/tests/unit/menu/menu_test_helpers.js b/tests/unit/menu/menu_test_helpers.js index 77737c390..ea273c765 100644 --- a/tests/unit/menu/menu_test_helpers.js +++ b/tests/unit/menu/menu_test_helpers.js @@ -24,7 +24,9 @@ TestHelpers.menu = { click: function( menu, item ) { lastItem = item; - menu.children( ":eq(" + item + ")" ).trigger( "click" ); + menu.children( ":eq(" + item + ")" ) + .children( ".ui-menu-item-wrapper" ) + .trigger( "click" ); } }; diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 11e9df6e1..855748d3d 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -28,7 +28,7 @@ }); $( "#menu5" ).menu({ - menus: "div", + menus: ".menuElement", select: logger }); @@ -56,241 +56,288 @@
Default inline menu

-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
-
Delphi
-
Saarland
-
Salzburg
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston
+
Delphi
+
Saarland
+
Salzburg

Inline with disabled items and submenus

-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
-
Delphi +
Aberdeen
+
Ada
+
Adamsville
+
Addyston
+
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Saarland
-
Salzburg +
Saarland
+
+
Salzburg

-
Delphi +
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Delphi +
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Perch
+
Perch

-
Amesville
+
Amesville

Menu with icons

-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
-
Delphi +
+
Aberdeen
+
+
+
Ada
+
+
Adamsville
+
+
Addyston
+
+
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
+
Saarland
+
+
Salzburg

-
Saarland

- Salzburg +
Saarland
+
+
+ Salzburg +

- Delphi +
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Delphi +
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Perch
+
Perch

Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour

-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
-
Adelphi
-
Adena
-
Adrian
-
Akron
-
Albany
-
Alexandria
-
Alger
-
Alledonia
-
Alliance
-
Alpha
-
Alvada
-
Alvordton
-
Amanda
-
Amelia
-
Amesville
-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
-
Adelphi
-
Adena
-
Adrian
-
Akron
-
Albany
-
Alexandria
-
Alger
-
Alledonia
-
Alliance
-
Alpha
-
Alvada
-
Alvordton
-
Amanda
-
Amelia
-
Amesville
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston
+
Adelphi
+
Adena
+
Adrian
+
Akron
+
Albany
+
Alexandria
+
Alger
+
Alledonia
+
Alliance
+
Alpha
+
Alvada
+
Alvordton
+
Amanda
+
Amelia
+
Amesville
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston
+
Adelphi
+
Adena
+
Adrian
+
Akron
+
Albany
+
Alexandria
+
Alger
+
Alledonia
+
Alliance
+
Alpha
+
Alvada
+
Alvordton
+
Amanda
+
Amelia
+
Amesville

Menu with custom markup
-
-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
-
Delphi -
-
Ada
-
Saarland
-
Salzburg
-
+
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston
+
+
Delphi
+
+
Ada
+
Saarland
+
Salzburg
+

-
Saarland
-
Salzburg -
-
Delphi -
-
Ada
-
Saarland
-
Salzburg
-
+
Saarland
+
+
Salzburg
+
+
+
Delphi
+
+
Ada
+
Saarland
+
Salzburg
+

-
Delphi -
-
Ada
-
Saarland
-
Salzburg
-
+
+
Delphi
+
+
Ada
+
Saarland
+
Salzburg
+

-
Perch
-
+
Perch
+

Menu with custom markup, multi-line items and a custom submenu icon

- John Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +
+ John Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- Jane Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +
+ Jane Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- James Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +
+ James Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- Jenny Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +
+ Jenny Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

- John Doe - 78 West Main St Apt 3A - Bloomsburg, PA 12345 +
+ John Doe + 78 West Main St Apt 3A + Bloomsburg, PA 12345 +

-
Ada
-
Saarland
-
Salzburg
+
+
Ada
+
+
+
Saarland
+
+
+
Salzburg
+

Inline with dividers and group labels

-
Group 1
-
Aberdeen
-
Ada
-
Adamsville
-
Addyston
+
+
Group 1
+
+
Aberdeen
+
Ada
+
Adamsville
+
Addyston

-
Group 2
-
Delphi +
+
Group 2
+
+
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Saarland
+
Saarland

---
-
Group 3
-
Salzburg +
+
Group 3
+
+
+
Salzburg

-
Delphi +
+
Delphi

-
Ada
-
-
-
Saarland
+
Ada
+
-
+
Saarland

—
-
Salzburg
+
Salzburg

–

-
Delphi +
+
Delphi

-
Ada
-
Saarland
-
Salzburg
+
Ada
+
Saarland
+
Salzburg

-
Perch
+
Perch

-
Amesville
+
Amesville

diff --git a/themes/base/menu.css b/themes/base/menu.css index 58c561349..dae8288a2 100644 --- a/themes/base/menu.css +++ b/themes/base/menu.css @@ -19,13 +19,15 @@ position: absolute; } .ui-menu .ui-menu-item { - position: relative; margin: 0; - padding: 3px 1em 3px .4em; cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } +.ui-menu .ui-menu-item-wrapper { + position: relative; + padding: 3px 1em 3px .4em; +} .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; @@ -42,7 +44,7 @@ .ui-menu-icons { position: relative; } -.ui-menu-icons .ui-menu-item { +.ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } diff --git a/ui/menu.js b/ui/menu.js index 31f621d22..b4909a116 100644 --- a/ui/menu.js +++ b/ui/menu.js @@ -36,7 +36,7 @@ return $.widget( "ui.menu", { items: "> *", menus: "ul", position: { - my: "left-1 top", + my: "left top", at: "right top" }, role: "menu", @@ -110,7 +110,8 @@ return $.widget( "ui.menu", { var target = $( event.currentTarget ); // Remove ui-state-active class from siblings of the newly focused menu item // to avoid a jump caused by adjacent elements both having a class with a border - target.siblings( ".ui-state-active" ).removeClass( "ui-state-active" ); + target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); + this.focus( event, target ); }, mouseleave: "collapseAll", @@ -169,17 +170,18 @@ return $.widget( "ui.menu", { .removeClass( "ui-menu-item" ) .removeAttr( "role" ) .removeAttr( "aria-disabled" ) - .removeUniqueId() - .removeClass( "ui-state-hover" ) - .removeAttr( "tabIndex" ) - .removeAttr( "role" ) - .removeAttr( "aria-haspopup" ) - .children().each( function() { - var elem = $( this ); - if ( elem.data( "ui-menu-submenu-carat" ) ) { - elem.remove(); - } - }); + .children( ".ui-menu-item-wrapper" ) + .removeUniqueId() + .removeClass( "ui-menu-item-wrapper ui-state-hover" ) + .removeAttr( "tabIndex" ) + .removeAttr( "role" ) + .removeAttr( "aria-haspopup" ) + .children().each(function() { + var elem = $( this ); + if ( elem.data( "ui-menu-submenu-carat" ) ) { + elem.remove(); + } + }); // Destroy menu dividers this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" ); @@ -267,7 +269,7 @@ return $.widget( "ui.menu", { _activate: function( event ) { if ( !this.active.is( ".ui-state-disabled" ) ) { - if ( this.active.is( "[aria-haspopup='true']" ) ) { + if ( this.active.children( "[aria-haspopup='true']" ).length ) { this.expand( event ); } else { this.select( event ); @@ -294,7 +296,7 @@ return $.widget( "ui.menu", { }) .each(function() { var menu = $( this ), - item = menu.parent(), + item = menu.prev(), submenuCarat = $( "" ) .addClass( "ui-menu-icon ui-icon " + icon ) .data( "ui-menu-submenu-carat", true ); @@ -319,11 +321,14 @@ return $.widget( "ui.menu", { // Don't refresh list items that are already adapted items.not( ".ui-menu-item, .ui-menu-divider" ) .addClass( "ui-menu-item" ) - .uniqueId() - .attr({ - tabIndex: -1, - role: this._itemRole() - }); + .children() + .not( ".ui-menu" ) + .addClass( "ui-menu-item-wrapper" ) + .uniqueId() + .attr({ + tabIndex: -1, + role: this._itemRole() + }); // Add aria-disabled attribute to any disabled menu item items.filter( ".ui-state-disabled" ).attr( "aria-disabled", "true" ); @@ -362,7 +367,10 @@ return $.widget( "ui.menu", { this._scrollIntoView( item ); this.active = item.first(); - focused = this.active.addClass( "ui-state-focus" ).removeClass( "ui-state-active" ); + focused = this.active.children( ".ui-menu-item-wrapper" ) + .addClass( "ui-state-focus" ) + .removeClass( "ui-state-active" ); + // Only update aria-activedescendant if there's a role // otherwise we assume focus is managed elsewhere if ( this.options.role ) { @@ -372,8 +380,9 @@ return $.widget( "ui.menu", { // Highlight active parent menu item, if any this.active .parent() - .closest( ".ui-menu-item" ) - .addClass( "ui-state-active" ); + .closest( ".ui-menu-item" ) + .children( ".ui-menu-item-wrapper" ) + .addClass( "ui-state-active" ); if ( event && event.type === "keydown" ) { this._close(); @@ -419,7 +428,7 @@ return $.widget( "ui.menu", { return; } - this.active.removeClass( "ui-state-focus" ); + this.active.children( ".ui-menu-item-wrapper" ).removeClass( "ui-state-focus" ); this.active = null; this._trigger( "blur", event, { item: this.active } ); @@ -628,7 +637,7 @@ return $.widget( "ui.menu", { this._trigger( "select", event, ui ); }, - _filterMenuItems: function(character) { + _filterMenuItems: function( character ) { var escapedCharacter = character.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" ), regex = new RegExp( "^" + escapedCharacter, "i" ); @@ -638,7 +647,8 @@ return $.widget( "ui.menu", { // Only match on items, not dividers or other content (#10571) .filter( ".ui-menu-item" ) .filter(function() { - return regex.test( $.trim( $( this ).text() ) ); + return regex.test( + $.trim( $( this ).children( ".ui-menu-item-wrapper" ).text() ) ); }); } }); -- 2.39.5