Merge pull request jquery#247 from aglemann/selectmenu

fixed: "focus" doesn't bubble, see jquery#241
blablacio · Jul 11, 2012 · 144affc · 144affc
2 parents 8b8480c + 397e986
commit 144affc
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 1 deletion.
diff --git a/tests/unit/index.html b/tests/unit/index.html
@@ -68,6 +68,7 @@ <h2>Widgets</h2>
 	<li><a href="datepicker/datepicker.html">Datepicker</a></li>
 	<li><a href="dialog/dialog.html">Dialog</a></li>
 	<li><a href="progressbar/progressbar.html">Progressbar</a></li>
+	<li><a href="selectmenu/selectmenu.html">Selectmenu</a></li>
 	<li><a href="slider/slider.html">Slider</a></li>
 	<li><a href="tabs/tabs.html">Tabs</a></li>
 </ul>

diff --git a/tests/unit/selectmenu/selectmenu.html b/tests/unit/selectmenu/selectmenu.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery UI Selectmenu Test Suite</title>
+
+	<link type="text/css" href="../../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
+
+	<script src="../../jquery.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../../ui/jquery.ui.selectmenu.js"></script>
+
+	<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
+	<script type="text/javascript" src="../../../external/qunit.js"></script>
+	<script type="text/javascript" src="../../jquery.simulate.js"></script>
+	<script type="text/javascript" src="../testsuite.js"></script>
+
+	<script type="text/javascript" src="selectmenu_tickets.js"></script>
+
+	<script type="text/javascript" src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Selectmenu Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture">
+	<select id="selectmenu">
+	  <option value="AL">Alabama</option>
+	  <option value="AK">Alaska</option>
+	  <option value="AS">American Samoa</option>
+	  <option value="AZ">Arizona</option>
+	  <option value="AR">Arkansas</option>
+	  <option value="AA">Armed Forces Americas</option>
+	  <option value="AE">Armed Forces Europe</option>
+	  <option value="AP">Armed Forces Pacific</option>
+	  <option value="CA">California</option>
+	  <option value="CO">Colorado</option>
+	  <option value="CT">Connecticut</option>
+	  <option value="DE">Delaware</option>
+	  <option value="DC">District of Columbia</option>
+	  <option value="FL">Florida</option>
+	  <option value="GA">Georgia</option>
+	  <option value="GU">Guam</option>
+	  <option value="HI">Hawaii</option>
+	  <option value="ID">Idaho</option>
+	  <option value="IL">Illinois</option>
+	  <option value="IN">Indiana</option>
+	  <option value="IA">Iowa</option>
+	  <option value="KS">Kansas</option>
+	  <option value="KY">Kentucky</option>
+	  <option value="LA">Louisiana</option>
+	  <option value="ME">Maine</option>
+	  <option value="MP">Marianas</option>
+	  <option value="MH">Marshall Islands</option>
+	  <option value="MD">Maryland</option>
+	  <option value="MA">Massachusetts</option>
+	  <option value="MI">Michigan</option>
+	  <option value="FM">Micronesia</option>
+	  <option value="MN">Minnesota</option>
+	  <option value="MS">Mississippi</option>
+	  <option value="MO">Missouri</option>
+	  <option value="MT">Montana</option>
+	  <option value="NE">Nebraska</option>
+	  <option value="NV">Nevada</option>
+	  <option value="NH">New Hampshire</option>
+	  <option value="NJ">New Jersey</option>
+	  <option value="NM">New Mexico</option>
+	  <option value="NY">New York</option>
+	  <option value="NC">North Carolina</option>
+	  <option value="ND">North Dakota</option>
+	  <option value="OH">Ohio</option>
+	  <option value="OK">Oklahoma</option>
+	  <option value="OR">Oregon</option>
+	  <option value="PW">Palau</option>
+	  <option value="PA">Pennsylvania</option>
+	  <option value="PR">Puerto Rico</option>
+	  <option value="RI">Rhode Island</option>
+	  <option value="SC">South Carolina</option>
+	  <option value="SD">South Dakota</option>
+	  <option value="TN">Tennessee</option>
+	  <option value="TX">Texas</option>
+	  <option value="UT">Utah</option>
+	  <option value="VT">Vermont</option>
+	  <option value="VI">Virgin Islands</option>
+	  <option value="VA">Virginia</option>
+	  <option value="WA">Washington</option>
+	  <option value="WV">West Virginia</option>
+	  <option value="WI">Wisconsin</option>
+	  <option value="WY">Wyoming</option>
+	</select>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit/selectmenu/selectmenu_tickets.js b/tests/unit/selectmenu/selectmenu_tickets.js
@@ -0,0 +1,25 @@
+/*
+ * selectmenu_tickets.js
+ */
+(function($) {
+
+module("selectmenu: tickets");
+
+test('#241 - "focus" doesn\'t bubble', function() {
+	// https://github.com/fnagel/jquery-ui/issues/241
+	expect(4);
+
+	el = $('#selectmenu').selectmenu();
+
+	$('.ui-selectmenu').mousedown();
+	ok($('.ui-selectmenu-menu').hasClass('ui-selectmenu-open'), 'selectmenu menu element should be visible');
+	ok($('.ui-selectmenu-menu li:eq(0)').hasClass('ui-selectmenu-item-focus'), 'first item should have focus');
+
+    $('.ui-selectmenu-menu-dropdown').simulate('keydown', { keyCode: $.ui.keyCode.DOWN });
+	ok($('.ui-selectmenu-menu li:eq(1)').hasClass('ui-selectmenu-item-focus'), 'after down arrow press, second item should have focus');
+
+    $('.ui-selectmenu-menu-dropdown').simulate('keypress', { keyCode: 'a'.charCodeAt(0) });
+	ok($('.ui-selectmenu-menu li:eq(2)').hasClass('ui-selectmenu-item-focus'), 'after "a" key press, third item should have focus');
+});
+
+})(jQuery);
diff --git a/ui/jquery.ui.selectmenu.js b/ui/jquery.ui.selectmenu.js
@@ -308,7 +308,12 @@ $.widget("ui.selectmenu", {
 					href : '#nogo',
 					tabindex : -1,
 					role : 'option',
-					'aria-selected' : false
+					'aria-selected' : false,
+					focus: function() {
+
+					    // bubble the focus event
+					    $(this).parent().focus();
+					}
 				};
 				if ( selectOptionData[ i ].disabled ) {
 					thisAAttr[ 'aria-disabled' ] = selectOptionData[ i ].disabled;