diff --git a/demos/selectmenu/custom_render.html b/demos/selectmenu/custom_render.html
index 7e69dc3e188..2e775084ce4 100644
--- a/demos/selectmenu/custom_render.html
+++ b/demos/selectmenu/custom_render.html
@@ -36,15 +36,15 @@
var files = $('select#files').iconselectmenu({
dropdown: false
});
- files.iconselectmenu("widget").children("ul").addClass("ui-menu-icons");
+ files.iconselectmenu("menuWidget").addClass("ui-menu-icons");
var filesB = $('select#filesB').iconselectmenu({
dropdown: false
});
- filesB.iconselectmenu("widget").children("ul").addClass("ui-menu-icons customicons");
+ filesB.iconselectmenu("menuWidget").addClass("ui-menu-icons customicons");
var peopleA = $('select#peopleA').iconselectmenu();
- peopleA.iconselectmenu("widget").children("ul").addClass("ui-menu-icons avatar");
+ peopleA.iconselectmenu("menuWidget").addClass("ui-menu-icons avatar");
});
diff --git a/tests/unit/selectmenu/selectmenu_core.js b/tests/unit/selectmenu/selectmenu_core.js
index c6dff8a74fa..4fabdc15f68 100644
--- a/tests/unit/selectmenu/selectmenu_core.js
+++ b/tests/unit/selectmenu/selectmenu_core.js
@@ -4,21 +4,19 @@ module( "selectmenu: core" );
test("accessibility", function () {
var element = $('#speed').selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu"),
+ button = element.selectmenu("widget").parent(),
+ menu = element.selectmenu("menuWidget").parent(),
link = button.find("a"),
selected = element.find("option:selected"),
ul = menu.children("ul"),
links = ul.find("li.ui-menu-item a");
- expect(13 + links.length * 2);
+ expect(12 + links.length * 2);
equals( link.attr("role"), "combobox", "button link role" );
equals( link.attr("aria-haspopup"), "true", "button link aria-haspopup" );
equals( link.attr("aria-expanded"), "false", "button link aria-expanded" );
equals( link.attr("aria-autocomplete"), "list", "button link aria-autocomplete" );
- equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "button link aria-activedescendant" );
equals( link.attr("aria-owns"), ul.attr("id"), "button link aria-owns" );
equals( link.attr("tabindex"), 0, "button link tabindex" );
@@ -46,12 +44,11 @@ $.each([
}
], function( i, settings ) {
test("state synchronization - " + settings.type, function () {
- expect(10);
+ expect(8);
var element = $(settings.selector).selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu"),
+ button = element.selectmenu("widget").parent(),
+ menu = element.selectmenu("menuWidget").parent(),
link = button.find("a"),
ul = menu.children("ul"),
links = ul.find("li.ui-menu-item a"),
@@ -59,7 +56,6 @@ $.each([
link.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
equals( ul.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after keydown menu aria-activedescendant" );
- equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after keydown button link aria-activedescendant" );
equals( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "after keydown selected menu link aria-selected" );
equals( element.find("option:selected").val(), selected.next("option").val() , "after keydown original select state" );
equals( button.text(), selected.next("option").text(), "after keydown button text" );
@@ -67,7 +63,6 @@ $.each([
link.simulate( "click" );
menu.find("a").last().simulate( "mouseover" ).trigger( "click" );
equals( ul.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after click menu aria-activedescendant" );
- equals( link.attr("aria-activedescendant"), links.eq(element[0].selectedIndex).attr("id"), "after click button link aria-activedescendant" );
equals( links.eq(element[0].selectedIndex).attr("aria-selected"), "true", "after click selected menu link aria-selected" );
equals( element.find("option:selected").val(), element.find("option").last().val(), "after click original select state" );
equals( button.text(), element.find("option").last().text(), "after click button text" );
diff --git a/tests/unit/selectmenu/selectmenu_events.js b/tests/unit/selectmenu/selectmenu_events.js
index b5adbc0f599..dcc7c71c72e 100644
--- a/tests/unit/selectmenu/selectmenu_events.js
+++ b/tests/unit/selectmenu/selectmenu_events.js
@@ -19,9 +19,8 @@ test("change", function () {
}
});
- var widget = this.element.selectmenu("widget"),
- menu = widget.filter(".ui-selectmenu-menu"),
- button = widget.filter(".ui-selectmenu-button"),
+ var button = this.element.selectmenu("widget").parent(),
+ menu = this.element.selectmenu("menuWidget").parent(),
value = this.element.find("option").first().text();
button.find("a").simulate( "click" );
@@ -61,9 +60,8 @@ test("focus", function () {
}
});
- var widget = this.element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu");
+ var button = this.element.selectmenu("widget").parent(),
+ menu = this.element.selectmenu("menuWidget").parent();
button.find("a").simulate( "click" );
menu.find(".ui-menu-item").simulate("mouseover");
@@ -97,9 +95,8 @@ test("select", function () {
}
});
- var widget = this.element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu");
+ var button = this.element.selectmenu("widget").parent(),
+ menu = this.element.selectmenu("menuWidget").parent();
button.find("a").simulate( "click" );
menu.find("a").first().simulate( "mouseover" ).trigger("click");
diff --git a/tests/unit/selectmenu/selectmenu_methods.js b/tests/unit/selectmenu/selectmenu_methods.js
index 942ab9e7bcf..bd94068a7ef 100644
--- a/tests/unit/selectmenu/selectmenu_methods.js
+++ b/tests/unit/selectmenu/selectmenu_methods.js
@@ -14,9 +14,8 @@ test( "open / close", function() {
expect( 4 );
var element = $('#speed').selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu");
+ button = element.selectmenu("widget").parent(),
+ menu = element.selectmenu("menuWidget").parent();
element.selectmenu("open");
ok( menu.is( ":visible" ), "menu visible" );
@@ -29,31 +28,26 @@ test( "open / close", function() {
test("enable / disable", function () {
- expect(14);
+ expect(10);
var element = $('#speed').selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu"),
+ button = element.selectmenu("widget"),
+ menu = element.selectmenu("menuWidget"),
link = button.find("a");
element.selectmenu("disable");
ok( element.selectmenu("option", "disabled"), "disable: widget option" );
equals( element.attr("disabled"), "disabled", "disable: native select disabled" );
equals( button.attr("aria-disabled"), "true", "disable: button wrapper ARIA" );
- equals( link.attr("aria-disabled"), "true", "disable: button ARIA" );
- equals( link.attr("tabindex"), -1, "disable: button tabindex" );
+ equals( button.attr("tabindex"), -1, "disable: button tabindex" );
equals( menu.attr("aria-disabled"), "true", "disable: menu wrapper ARIA" );
- equals( menu.children("ul").attr("aria-disabled"), "true", "disable: menu ARIA" );
element.selectmenu("enable");
ok( !element.selectmenu("option", "disabled"), "enable: widget option" );
equals( element.attr("disabled"), undefined, "enable: native select disabled" );
equals( button.attr("aria-disabled"), "false", "enable: button wrapper ARIA" );
- equals( link.attr("aria-disabled"), "false", "enable: button ARIA" );
- equals( link.attr("tabindex"), 0, "enable: button tabindex" );
+ equals( button.attr("tabindex"), 0, "enable: button tabindex" );
equals( menu.attr("aria-disabled"), "false", "enable: menu wrapper ARIA" );
- equals( menu.children("ul").attr("aria-disabled"), "false", "enable: menu ARIA" );
});
@@ -61,9 +55,7 @@ test("refresh - structure", function () {
expect(3);
var element = $('#speed').selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu");
+ menu = element.selectmenu("menuWidget").parent();
element.find("option").eq(2).remove();
element.find("option").eq(3).remove();
@@ -80,22 +72,19 @@ test("refresh - structure", function () {
test("refresh - disabled select", function () {
- expect(6);
+ expect(4);
var element = $('#speed').selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu");
+ button = element.selectmenu("widget"),
+ menu = element.selectmenu("menuWidget");
element.attr("disabled", "disabled");
element.selectmenu("refresh");
ok( element.selectmenu("option", "disabled"), "widget option" );
equals( button.attr("aria-disabled"), "true", "button wrapper ARIA" );
- equals( button.children("a").attr("aria-disabled"), "true", "button ARIA" );
- equals( button.children("a").attr("tabindex"), -1, "button tabindex" );
+ equals( button.attr("tabindex"), -1, "button tabindex" );
equals( menu.attr("aria-disabled"), "true", "menu wrapper ARIA" );
- equals( menu.children("ul").attr("aria-disabled"), "true", "mene ARIA" );
});
@@ -103,9 +92,8 @@ test("refresh - disabled option", function () {
expect(2);
var element = $('#speed').selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu");
+ button = element.selectmenu("widget").parent(),
+ menu = element.selectmenu("menuWidget").parent();
element.attr("disabled", "disabled");
element.find("option").eq(2).attr("disabled", "disabled");
@@ -120,9 +108,8 @@ test("refresh - disabled option", function () {
test("refresh - disabled optgroup", function () {
var element = $('#files').selectmenu(),
- widget = element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- menu = widget.filter(".ui-selectmenu-menu"),
+ button = element.selectmenu("widget").parent(),
+ menu = element.selectmenu("menuWidget").parent(),
originalDisabledOptgroup = element.find("optgroup").first(),
originalDisabledOptions = originalDisabledOptgroup.find("option");
diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js
index d5a78745518..2271df1675f 100644
--- a/tests/unit/selectmenu/selectmenu_options.js
+++ b/tests/unit/selectmenu/selectmenu_options.js
@@ -17,11 +17,9 @@ test("appendTo another element", function () {
test("dropdown: CSS styles", function () {
expect(4);
- var widget = this.element.selectmenu("widget"),
- button = widget.filter(".ui-selectmenu-button"),
- link = button.find("a"),
- menu = widget.filter(".ui-selectmenu-menu"),
- ul = widget.find("ul");
+ var button = this.element.selectmenu("widget").parent(),
+ ul = this.element.selectmenu("menuWidget"),
+ link = button.find("a");
this.element.selectmenu("open");
ok( link.hasClass("ui-corner-top") && !link.hasClass("ui-corner-all"), "button styles dropdown");
diff --git a/tests/visual/selectmenu/disabled.html b/tests/visual/selectmenu/disabled.html
index e2bc436ac1c..b74b9353023 100644
--- a/tests/visual/selectmenu/disabled.html
+++ b/tests/visual/selectmenu/disabled.html
@@ -20,7 +20,7 @@
var withOverflow = $('select#number').selectmenu({
dropdown: false
});
- withOverflow.selectmenu("widget").addClass("overflow");
+ withOverflow.selectmenu("menuWidget").addClass("overflow");
$('select#files').selectmenu();
var files2 = $('select#files2').selectmenu();
@@ -43,7 +43,6 @@
}, function() {
files2.find("optgroup:eq(0)").removeAttr("disabled");
files2.selectmenu("refresh");
-
});
});
@@ -52,7 +51,7 @@
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
- .overflow ul { height: 200px; overflow: auto; }
+ .overflow { height: 200px; overflow: auto; }
diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js
index cedfc1f4a84..193cd01f90f 100644
--- a/ui/jquery.ui.selectmenu.js
+++ b/ui/jquery.ui.selectmenu.js
@@ -248,7 +248,11 @@ $.widget( "ui.selectmenu", {
},
widget: function() {
- return this.buttonWrap.add( this.menuWrap );
+ return this.button;
+ },
+
+ menuWidget: function() {
+ return this.menu;
},
_renderMenu: function( ul, items ) {
@@ -260,6 +264,8 @@ $.widget( "ui.selectmenu", {
var optgroup = $( '', {
'class': 'ui-selectmenu-optgroup',
html: item.optgroup,
+ // prevents clicks on this header to close the menu
+ // TODO try to improve this, check how autocomplete handles it
click: function( event ){
event.stopPropagation();
}