Skip to content
This repository
Browse code

Fixes keyboard controls on custom selects, previously breaking in any…

… custom select with a header/dividers.
  • Loading branch information...
commit 94f45ff75e0c3625e2f2598f49ac8c05cb905f97 1 parent 5a86cd3
Mat Marquis authored

Showing 1 changed file with 31 additions and 21 deletions. Show diff stats Hide diff stats

  1. 52  js/jquery.mobile.forms.select.custom.js
52  js/jquery.mobile.forms.select.custom.js
@@ -53,17 +53,18 @@ define( [
53 53
 			headerTitle = $( "<h1>", {
54 54
 				"class": "ui-title"
55 55
 			}).appendTo( header ),
  56
+			
  57
+			menuPageContent,
  58
+			menuPageClose,
  59
+			headerClose;
56 60
 
  61
+		if( widget.isMultiple ) {
57 62
 			headerClose = $( "<a>", {
58 63
 				"text": widget.options.closeText,
59 64
 				"href": "#",
60 65
 				"class": "ui-btn-left"
61  
-			}).attr( "data-" + $.mobile.ns + "iconpos", "notext" ).attr( "data-" + $.mobile.ns + "icon", "delete" ).appendTo( header ).buttonMarkup(),
62  
-
63  
-			menuPageContent,
64  
-			
65  
-			menuPageClose;
66  
-
  66
+			}).attr( "data-" + $.mobile.ns + "iconpos", "notext" ).attr( "data-" + $.mobile.ns + "icon", "delete" ).appendTo( header ).buttonMarkup();
  67
+		}
67 68
 
68 69
 		$.extend( widget, {
69 70
 			select: widget.select,
@@ -159,7 +160,11 @@ define( [
159 160
 						switch ( event.keyCode ) {
160 161
 							// up or left arrow keys
161 162
 						 case 38:
162  
-							prev = li.prev();
  163
+							prev = li.prev().not( ".ui-selectmenu-placeholder" );
  164
+							
  165
+							if( prev.is( ".ui-li-divider" ) ) {
  166
+								prev = prev.prev();
  167
+							}
163 168
 
164 169
 							// if there's a previous option, focus it
165 170
 							if ( prev.length ) {
@@ -167,7 +172,7 @@ define( [
167 172
 									.blur()
168 173
 									.attr( "tabindex", "-1" );
169 174
 
170  
-								prev.find( "a" ).first().focus();
  175
+								prev.addClass( "ui-btn-down-" + widget.options.theme ).find( "a" ).first().focus();
171 176
 							}
172 177
 
173 178
 							return false;
@@ -176,6 +181,10 @@ define( [
176 181
 							// down or right arrow keys
177 182
 						 case 40:
178 183
 							next = li.next();
  184
+							
  185
+							if( next.is( ".ui-li-divider" ) ) {
  186
+								next = next.next();
  187
+							}
179 188
 
180 189
 							// if there's a next option, focus it
181 190
 							if ( next.length ) {
@@ -183,7 +192,7 @@ define( [
183 192
 									.blur()
184 193
 									.attr( "tabindex", "-1" );
185 194
 
186  
-								next.find( "a" ).first().focus();
  195
+								next.addClass( "ui-btn-down-" + widget.options.theme ).find( "a" ).first().focus();
187 196
 							}
188 197
 
189 198
 							return false;
@@ -226,12 +235,14 @@ define( [
226 235
 				});
227 236
 
228 237
 				// Close button on small overlays
229  
-				self.headerClose.click( function() {
230  
-					if ( self.menuType == "overlay" ) {
231  
-						self.close();
232  
-						return false;
233  
-					}
234  
-				});
  238
+				if( self.isMultiple ){ 
  239
+					self.headerClose.click( function() {
  240
+						if ( self.menuType == "overlay" ) {
  241
+							self.close();
  242
+							return false;
  243
+						}
  244
+					});
  245
+				}
235 246
 
236 247
 				// track this dependency so that when the parent page
237 248
 				// is removed on pagehide it will also remove the menupage
@@ -279,7 +290,11 @@ define( [
279 290
 							if ( self.isMultiple ) {
280 291
 								item.find( ".ui-icon" ).removeClass( "ui-icon-checkbox-off" ).addClass( "ui-icon-checkbox-on" );
281 292
 							} else {
282  
-								item.addClass( $.mobile.activeBtnClass );
  293
+								if( item.is( ".ui-selectmenu-placeholder" ) ) {
  294
+									item.next().addClass( $.mobile.activeBtnClass );
  295
+								} else {
  296
+									item.addClass( $.mobile.activeBtnClass );
  297
+								}
283 298
 							}
284 299
 						}
285 300
 					});
@@ -493,11 +508,6 @@ define( [
493 508
 
494 509
 				self.list[0].appendChild(fragment);
495 510
 
496  
-				// Hide header close link for single selects
497  
-				if ( !this.isMultiple ) {
498  
-					this.headerClose.hide();
499  
-				}
500  
-
501 511
 				// Hide header if it's not a multiselect and there's no placeholder
502 512
 				if ( !this.isMultiple && !placeholder.length ) {
503 513
 					this.header.hide();

0 notes on commit 94f45ff

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