Skip to content
This repository
Browse code

[custom select] Make keyboard navigation work for multiple choice sel…

…ect -- Fixes: #4039
  • Loading branch information...
commit 26bd1efa69f14a6fa587dbadf6b876f555e3af2e 1 parent 84eb4c9
Gabriel "_|Nix|_" Schulhof authored June 20, 2012

Showing 1 changed file with 18 additions and 4 deletions. Show diff stats Hide diff stats

  1. 22  js/jquery.mobile.forms.select.custom.js
22  js/jquery.mobile.forms.select.custom.js
@@ -146,8 +146,13 @@ define( [
146 146
 							self.select.trigger( "change" );
147 147
 						}
148 148
 
149  
-						//hide custom select for single selects only
150  
-						if ( !self.isMultiple ) {
  149
+						// hide custom select for single selects only - otherwise focus clicked item
  150
+						// We need to grab the clicked item the hard way, because the list may have been rebuilt
  151
+						if ( self.isMultiple ) {
  152
+							self.list.find( "li:not(.ui-li-divider)" ).eq( newIndex )
  153
+								.addClass( "ui-btn-down-" + widget.options.theme ).find( "a" ).first().focus();
  154
+						}
  155
+						else {
151 156
 							self.close();
152 157
 						}
153 158
 
@@ -351,7 +356,11 @@ define( [
351 356
 				}, 300);
352 357
 
353 358
 				function focusMenuItem() {
354  
-					self.list.find( "." + $.mobile.activeBtnClass + " a" ).focus();
  359
+					var selector = self.list.find( "." + $.mobile.activeBtnClass + " a" );
  360
+					if ( selector.length === 0 ) {
  361
+						selector = self.list.find( "li.ui-btn:not(:jqmData(placeholder='true')) a" );
  362
+					}
  363
+					selector.first().focus();
355 364
 				}
356 365
 
357 366
 				if ( menuHeight > screenHeight - 80 || !$.support.scrollTop ) {
@@ -453,9 +462,10 @@ define( [
453 462
 					dataIconAttr = dataPrefix + 'icon',
454 463
 					dataRoleAttr = dataPrefix + 'role',
455 464
 					fragment = document.createDocumentFragment(),
  465
+					isPlaceholderItem = false,
456 466
 					optGroup;
457 467
 
458  
-				for (var i = 0; i < numOptions;i++){
  468
+				for (var i = 0; i < numOptions;i++, isPlaceholderItem = false){
459 469
 					var option = $options[i],
460 470
 						$option = $(option),
461 471
 						parent = option.parentNode,
@@ -482,6 +492,7 @@ define( [
482 492
 
483 493
 					if (needPlaceholder && (!option.getAttribute( "value" ) || text.length == 0 || $option.jqmData( "placeholder" ))) {
484 494
 						needPlaceholder = false;
  495
+						isPlaceholderItem = true;
485 496
 						if ( o.hidePlaceholderMenuItems ) {
486 497
 							classes.push( "ui-selectmenu-placeholder" );
487 498
 						}
@@ -497,6 +508,9 @@ define( [
497 508
 					}
498 509
 					item.setAttribute(dataIndexAttr,i);
499 510
 					item.setAttribute(dataIconAttr,dataIcon);
  511
+					if ( isPlaceholderItem ) {
  512
+						item.setAttribute( dataPrefix + "placeholder", true );
  513
+					}
500 514
 					item.className = classes.join(" ");
501 515
 					item.setAttribute('role','option');
502 516
 					anchor.setAttribute('tabindex','-1');

0 notes on commit 26bd1ef

Please sign in to comment.
Something went wrong with that request. Please try again.