From e3ad4a0979cc3586097033b1697c8e31b72ca769 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Sun, 16 Jun 2013 02:37:40 +0300
Subject: [PATCH 01/12] Select: Normalize capitalization of the word "ID" in
 variables. Now "Id" is used everywhere.

---
 js/widgets/forms/select.custom.js | 26 +++++++++++++-------------
 js/widgets/forms/select.js        |  6 +++---
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 71437b39bfb..5afd7836531 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -49,7 +49,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 	},
 
 	build: function() {
-		var selectID, prefix, popupID, dialogID, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
+		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
 			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self;
 
 		if ( this.options.nativeMenu ) {
@@ -57,24 +57,24 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		}
 
 		self = this;
-		selectID = this.selectID;
-		prefix = ( selectID ? selectID : ( ( $.mobile.ns || "" ) + "uuid-" + this.uuid ) );
-		popupID = prefix + "-listbox";
-		dialogID = prefix + "-dialog";
+		selectId = this.selectId;
+		prefix = ( selectId ? selectId : ( ( $.mobile.ns || "" ) + "uuid-" + this.uuid ) );
+		popupId = prefix + "-listbox";
+		dialogId = prefix + "-dialog";
 		label = this.label;
 		thisPage = this.element.closest( ".ui-page" );
 		isMultiple = this.element[ 0 ].multiple;
-		menuId = selectID + "-menu";
+		menuId = selectId + "-menu";
 		themeAttr = this.options.theme ? ( " data-" + $.mobile.ns + "theme='" + this.options.theme + "'" ) : "";
 		overlayThemeAttr = this.options.overlayTheme ? ( " data-" + $.mobile.ns + "theme='" + this.options.overlayTheme + "'" ) : "";
 		dividerThemeAttr = ( this.options.dividerTheme && isMultiple ) ? ( " data-" + $.mobile.ns + "divider-theme='" + this.options.dividerTheme + "'" ) : "";
-		menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' class='ui-selectmenu' id='" + dialogID + "'" + themeAttr + overlayThemeAttr + ">" +
+		menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' class='ui-selectmenu' id='" + dialogId + "'" + themeAttr + overlayThemeAttr + ">" +
 			"<div data-" + $.mobile.ns + "role='header'>" +
 			"<div class='ui-title'>" + label.getEncodedText() + "</div>"+
 			"</div>"+
 			"<div data-" + $.mobile.ns + "role='content'></div>"+
 			"</div>" );
-		listbox = $( "<div id='" + popupID + "' class='ui-selectmenu'>" ).insertAfter( this.select ).popup({ theme: this.options.overlayTheme });
+		listbox = $( "<div id='" + popupId + "' class='ui-selectmenu'>" ).insertAfter( this.select ).popup({ theme: this.options.overlayTheme });
 		list = $( "<ul class='ui-selectmenu-list' id='" + menuId + "' role='listbox' aria-labelledby='" + this.buttonId + "'" + themeAttr + dividerThemeAttr + ">" ).appendTo( listbox );
 		header = $( "<div class='ui-header ui-bar-" + ( this.options.theme ? this.options.theme : "inherit" ) + "'>" ).prependTo( listbox );
 		headerTitle = $( "<h1 class='ui-title'>" ).appendTo( header );
@@ -88,10 +88,10 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		}
 
 		$.extend( this, {
-			selectID: selectID,
+			selectId: selectId,
 			menuId: menuId,
-			popupID: popupID,
-			dialogID: dialogID,
+			popupId: popupId,
+			dialogId: dialogId,
 			thisPage: thisPage,
 			menuPage: menuPage,
 			label: label,
@@ -134,9 +134,9 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 				self._decideFormat();
 				if ( self.menuType === "overlay" ) {
-					self.button.attr( "href", "#" + self.popupID ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "popup" );
+					self.button.attr( "href", "#" + self.popupId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "popup" );
 				} else {
-					self.button.attr( "href", "#" + self.dialogID ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "dialog" );
+					self.button.attr( "href", "#" + self.dialogId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "dialog" );
 				}
 				self.isOpen = true;
 				// Do not prevent default, so the navigation may have a chance to actually open the chosen format
diff --git a/js/widgets/forms/select.js b/js/widgets/forms/select.js
index 7afd10d39d1..fd34fa6acac 100644
--- a/js/widgets/forms/select.js
+++ b/js/widgets/forms/select.js
@@ -76,9 +76,9 @@ $.widget( "mobile.selectmenu", $.mobile.widget, $.extend( {
 		}
 
 		this.select = this.element.removeClass( "ui-btn-left ui-btn-right" ).wrap( "<div class='ui-select" + classes + "'>" );
-		this.selectID  = this.select.attr( "id" );
-		this.buttonId = this.selectID + "-button";
-		this.label = $( "label[for='"+ this.selectID +"']" );
+		this.selectId  = this.select.attr( "id" );
+		this.buttonId = this.selectId + "-button";
+		this.label = $( "label[for='"+ this.selectId +"']" );
 		this.isMultiple = this.select[ 0 ].multiple;
 	},
 

From 0356e676d27cac7871192d6a545724c16dd8af10 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Sun, 16 Jun 2013 02:46:49 +0300
Subject: [PATCH 02/12] Custom select: Stop referring so much to this.options
 in build(), using o = this.options instead.

---
 js/widgets/forms/select.custom.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 5afd7836531..f8616932023 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -50,9 +50,10 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 	build: function() {
 		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
-			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self;
+			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self,
+			o = this.options;
 
-		if ( this.options.nativeMenu ) {
+		if ( o.nativeMenu ) {
 			return this._super();
 		}
 
@@ -65,23 +66,23 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		thisPage = this.element.closest( ".ui-page" );
 		isMultiple = this.element[ 0 ].multiple;
 		menuId = selectId + "-menu";
-		themeAttr = this.options.theme ? ( " data-" + $.mobile.ns + "theme='" + this.options.theme + "'" ) : "";
-		overlayThemeAttr = this.options.overlayTheme ? ( " data-" + $.mobile.ns + "theme='" + this.options.overlayTheme + "'" ) : "";
-		dividerThemeAttr = ( this.options.dividerTheme && isMultiple ) ? ( " data-" + $.mobile.ns + "divider-theme='" + this.options.dividerTheme + "'" ) : "";
+		themeAttr = o.theme ? ( " data-" + $.mobile.ns + "theme='" + o.theme + "'" ) : "";
+		overlayThemeAttr = o.overlayTheme ? ( " data-" + $.mobile.ns + "theme='" + o.overlayTheme + "'" ) : "";
+		dividerThemeAttr = ( o.dividerTheme && isMultiple ) ? ( " data-" + $.mobile.ns + "divider-theme='" + o.dividerTheme + "'" ) : "";
 		menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' class='ui-selectmenu' id='" + dialogId + "'" + themeAttr + overlayThemeAttr + ">" +
 			"<div data-" + $.mobile.ns + "role='header'>" +
 			"<div class='ui-title'>" + label.getEncodedText() + "</div>"+
 			"</div>"+
 			"<div data-" + $.mobile.ns + "role='content'></div>"+
 			"</div>" );
-		listbox = $( "<div id='" + popupId + "' class='ui-selectmenu'>" ).insertAfter( this.select ).popup({ theme: this.options.overlayTheme });
+		listbox = $( "<div id='" + popupId + "' class='ui-selectmenu'>" ).insertAfter( this.select ).popup({ theme: o.overlayTheme });
 		list = $( "<ul class='ui-selectmenu-list' id='" + menuId + "' role='listbox' aria-labelledby='" + this.buttonId + "'" + themeAttr + dividerThemeAttr + ">" ).appendTo( listbox );
-		header = $( "<div class='ui-header ui-bar-" + ( this.options.theme ? this.options.theme : "inherit" ) + "'>" ).prependTo( listbox );
+		header = $( "<div class='ui-header ui-bar-" + ( o.theme ? o.theme : "inherit" ) + "'>" ).prependTo( listbox );
 		headerTitle = $( "<h1 class='ui-title'>" ).appendTo( header );
 
 		if ( this.isMultiple ) {
 			headerClose = $( "<a>", {
-				"text": this.options.closeText,
+				"text": o.closeText,
 				"href": "#",
 				"class": "ui-btn ui-corner-all ui-btn-left ui-btn-icon-notext ui-icon-delete"
 			}).appendTo( header );
@@ -96,7 +97,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			menuPage: menuPage,
 			label: label,
 			isMultiple: isMultiple,
-			theme: this.options.theme,
+			theme: o.theme,
 			listbox: listbox,
 			list: list,
 			header: header,

From a0ffdefe2ae0f2b41fa6235e61531e40af9a1402 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Tue, 18 Jun 2013 22:01:13 +0300
Subject: [PATCH 03/12] Custom select: Removing some references to "self" in
 build().

---
 js/widgets/forms/select.custom.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index f8616932023..8995c137cff 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -109,23 +109,23 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		});
 
 		// Create list from select, update state
-		self.refresh();
+		this.refresh();
 
-		if ( self._origTabIndex === undefined ) {
-			// Map undefined to false, because self._origTabIndex === undefined
+		if ( this._origTabIndex === undefined ) {
+			// Map undefined to false, because this._origTabIndex === undefined
 			// indicates that we have not yet checked whether the select has
 			// originally had a tabindex attribute, whereas false indicates that
 			// we have checked the select for such an attribute, and have found
 			// none present.
-			self._origTabIndex = ( self.select[ 0 ].getAttribute( "tabindex" ) === null ) ? false : self.select.attr( "tabindex" );
+			this._origTabIndex = ( this.select[ 0 ].getAttribute( "tabindex" ) === null ) ? false : this.select.attr( "tabindex" );
 		}
-		self.select.attr( "tabindex", "-1" ).focus(function() {
+		this.select.attr( "tabindex", "-1" ).focus(function() {
 			$( this ).blur();
 			self.button.focus();
 		});
 
 		// Button events
-		self.button.bind( "vclick keydown" , function( event ) {
+		this.button.bind( "vclick keydown" , function( event ) {
 			if ( self.options.disabled || self.isOpen ) {
 				return;
 			}
@@ -145,7 +145,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		});
 
 		// Events for list items
-		self.list.attr( "role", "listbox" )
+		this.list.attr( "role", "listbox" )
 			.bind( "focusin", function( e ) {
 				$( e.target )
 					.attr( "tabindex", "0" )
@@ -216,7 +216,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 		// button refocus ensures proper height calculation
 		// by removing the inline style and ensuring page inclusion
-		self.menuPage.bind( "pagehide", function() {
+		this.menuPage.bind( "pagehide", function() {
 			// TODO centralize page removal binding / handling in the page plugin.
 			// Suggestion from @jblas to do refcounting
 			//
@@ -233,13 +233,13 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		});
 
 		// Events on the popup
-		self.listbox.bind( "popupafterclose", function() {
+		this.listbox.bind( "popupafterclose", function() {
 			self.close();
 		});
 
 		// Close button on small overlays
-		if ( self.isMultiple ) {
-			self.headerClose.click(function() {
+		if ( this.isMultiple ) {
+			this.headerClose.click(function() {
 				if ( self.menuType === "overlay" ) {
 					self.close();
 					return false;
@@ -249,7 +249,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 		// track this dependency so that when the parent page
 		// is removed on pagehide it will also remove the menupage
-		self.thisPage.addDependents( this.menuPage );
+		this.thisPage.addDependents( this.menuPage );
 
 		return this;
 	},

From a0c6e1ace2b3f2df1d058b2892a127f86858bd9b Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Sun, 16 Jun 2013 02:50:53 +0300
Subject: [PATCH 04/12] Custom select: Moving binding that transfers focus from
 the native widget to the button into the widget prototype and calling it
 _handleSelectFocus().

---
 js/widgets/forms/select.custom.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 8995c137cff..96e28b4e5d8 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -48,6 +48,11 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		return this._super();
 	},
 
+	_handleSelectFocus: function() {
+		this.element.blur();
+		this.button.focus();
+	},
+
 	build: function() {
 		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
 			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self,
@@ -119,10 +124,8 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			// none present.
 			this._origTabIndex = ( this.select[ 0 ].getAttribute( "tabindex" ) === null ) ? false : this.select.attr( "tabindex" );
 		}
-		this.select.attr( "tabindex", "-1" ).focus(function() {
-			$( this ).blur();
-			self.button.focus();
-		});
+		this.select.attr( "tabindex", "-1" );
+		this._on( this.select, { focus : "_handleSelectFocus" } );
 
 		// Button events
 		this.button.bind( "vclick keydown" , function( event ) {

From b17e50439838b026de5596f2048e39851e64845f Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Sun, 16 Jun 2013 02:59:24 +0300
Subject: [PATCH 05/12] Custom select: Moving binding that opens the select
 into the widget prototype and calling it _handleButtonVclickKeydown().

---
 js/widgets/forms/select.custom.js | 39 +++++++++++++++++--------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 96e28b4e5d8..e46eb352204 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -53,6 +53,25 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		this.button.focus();
 	},
 
+	_handleButtonVclickKeydown: function( event ) {
+		if ( this.options.disabled || this.isOpen ) {
+			return;
+		}
+
+		if (event.type === "vclick" ||
+				event.keyCode && (event.keyCode === $.mobile.keyCode.ENTER || event.keyCode === $.mobile.keyCode.SPACE)) {
+
+			this._decideFormat();
+			if ( this.menuType === "overlay" ) {
+				this.button.attr( "href", "#" + this.popupId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "popup" );
+			} else {
+				this.button.attr( "href", "#" + this.dialogId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "dialog" );
+			}
+			this.isOpen = true;
+			// Do not prevent default, so the navigation may have a chance to actually open the chosen format
+		}
+	},
+
 	build: function() {
 		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
 			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self,
@@ -128,23 +147,9 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		this._on( this.select, { focus : "_handleSelectFocus" } );
 
 		// Button events
-		this.button.bind( "vclick keydown" , function( event ) {
-			if ( self.options.disabled || self.isOpen ) {
-				return;
-			}
-
-			if (event.type === "vclick" ||
-					event.keyCode && (event.keyCode === $.mobile.keyCode.ENTER || event.keyCode === $.mobile.keyCode.SPACE)) {
-
-				self._decideFormat();
-				if ( self.menuType === "overlay" ) {
-					self.button.attr( "href", "#" + self.popupId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "popup" );
-				} else {
-					self.button.attr( "href", "#" + self.dialogId ).attr( "data-" + ( $.mobile.ns || "" ) + "rel", "dialog" );
-				}
-				self.isOpen = true;
-				// Do not prevent default, so the navigation may have a chance to actually open the chosen format
-			}
+		this._on( this.button, {
+			vclick : "_handleButtonVclickKeydown",
+			keydown : "_handleButtonVclickKeydown"
 		});
 
 		// Events for list items

From 04b2f7382054a75f78e4d39322c8261d323056be Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Sun, 16 Jun 2013 04:40:54 +0300
Subject: [PATCH 06/12] Custom select: Moving item-to-item focus transfer
 binding into the widget prototype and calling it _handleListFocus().

---
 js/widgets/forms/select.custom.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index e46eb352204..1b97916d4f1 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -72,6 +72,16 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		}
 	},
 
+	_handleListFocus: function( e ) {
+		var params = ( e.type === "focusin" ) ?
+			{ tabindex: "0", event: "vmouseover" }:
+			{ tabindex: "-1", event: "vmouseout" };
+
+		$( e.target )
+			.attr( "tabindex", params.tabindex )
+			.trigger( params.event );
+	},
+
 	build: function() {
 		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
 			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self,
@@ -153,18 +163,12 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		});
 
 		// Events for list items
-		this.list.attr( "role", "listbox" )
-			.bind( "focusin", function( e ) {
-				$( e.target )
-					.attr( "tabindex", "0" )
-					.trigger( "vmouseover" );
-
-			})
-			.bind( "focusout", function( e ) {
-				$( e.target )
-					.attr( "tabindex", "-1" )
-					.trigger( "vmouseout" );
-			})
+		this.list.attr( "role", "listbox" );
+		this._on( this.list, {
+			focusin : "_handleListFocus",
+			focusout : "_handleListFocus"
+		});
+		this.list
 			.delegate( "li:not(.ui-disabled, .ui-li-divider)", "click", function( event ) {
 
 				// index of option tag to be selected

From 5c99158f95e839929906a796f5ed2715ac29cc90 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Sun, 16 Jun 2013 05:16:37 +0300
Subject: [PATCH 07/12] Custom select: Instead of determining the option that
 was clicked via a selector, use the "data-option-index" attribute that was
 set during list creation.

This attribute was being set but it was not being used.
---
 js/widgets/forms/select.custom.js | 49 ++++++++++++++++---------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 1b97916d4f1..168acc1a848 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -82,6 +82,28 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			.trigger( params.event );
 	},
 
+	_handleListKeydown: function( event ) {
+		var target = $( event.target ),
+			li = target.closest( "li" );
+
+		// switch logic based on which key was pressed
+		switch ( event.keyCode ) {
+			// up or left arrow keys
+		case 38:
+			goToAdjacentItem( li, target, "prev" );
+			return false;
+			// down or right arrow keys
+		case 40:
+			goToAdjacentItem( li, target, "next" );
+			return false;
+			// If enter or space is pressed, trigger click
+		case 13:
+		case 32:
+			target.trigger( "click" );
+			return false;
+		}
+	},
+
 	build: function() {
 		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
 			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self,
@@ -166,14 +188,15 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		this.list.attr( "role", "listbox" );
 		this._on( this.list, {
 			focusin : "_handleListFocus",
-			focusout : "_handleListFocus"
+			focusout : "_handleListFocus",
+			keydown: "_handleListKeydown"
 		});
 		this.list
 			.delegate( "li:not(.ui-disabled, .ui-li-divider)", "click", function( event ) {
 
 				// index of option tag to be selected
 				var oldIndex = self.select[ 0 ].selectedIndex,
-					newIndex = self.list.find( "li:not(.ui-li-divider)" ).index( this ),
+					newIndex = $.mobile.getAttribute( this, "option-index", true ),
 					option = self._selectOptions().eq( newIndex )[ 0 ];
 
 				// toggle selected status on the tag for multi selects
@@ -202,28 +225,6 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 				}
 
 				event.preventDefault();
-			})
-			.keydown(function( event ) {  //keyboard events for menu items
-				var target = $( event.target ),
-					li = target.closest( "li" );
-
-				// switch logic based on which key was pressed
-				switch ( event.keyCode ) {
-					// up or left arrow keys
-				case 38:
-					goToAdjacentItem( li, target, "prev" );
-					return false;
-					// down or right arrow keys
-				case 40:
-					goToAdjacentItem( li, target, "next" );
-					return false;
-					// If enter or space is pressed, trigger click
-				case 13:
-				case 32:
-					target.trigger( "click" );
-
-					return false;
-				}
 			});
 
 		// button refocus ensures proper height calculation

From 77143ac9e56b1ed41d4ccf5eef671597b01e1f9e Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Tue, 18 Jun 2013 21:43:42 +0300
Subject: [PATCH 08/12] Custom select: Moving binding that causes the dialog
 page to be destroyed into the widget prototype and calling it
 _handleMenuPageHide().

---
 js/widgets/forms/select.custom.js | 32 ++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 168acc1a848..230c9f51fd2 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -104,6 +104,22 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		}
 	},
 
+	_handleMenuPageHide: function() {
+		// TODO centralize page removal binding / handling in the page plugin.
+		// Suggestion from @jblas to do refcounting
+		//
+		// TODO extremely confusing dependency on the open method where the pagehide.remove
+		// bindings are stripped to prevent the parent page from disappearing. The way
+		// we're keeping pages in the DOM right now sucks
+		//
+		// rebind the page remove that was unbound in the open function
+		// to allow for the parent page removal from actions other than the use
+		// of a dialog sized custom select
+		//
+		// doing this here provides for the back button on the custom select dialog
+		$.mobile._bindPageRemove.call( this.thisPage );
+	},
+
 	build: function() {
 		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
 			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self,
@@ -229,21 +245,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 		// button refocus ensures proper height calculation
 		// by removing the inline style and ensuring page inclusion
-		this.menuPage.bind( "pagehide", function() {
-			// TODO centralize page removal binding / handling in the page plugin.
-			// Suggestion from @jblas to do refcounting
-			//
-			// TODO extremely confusing dependency on the open method where the pagehide.remove
-			// bindings are stripped to prevent the parent page from disappearing. The way
-			// we're keeping pages in the DOM right now sucks
-			//
-			// rebind the page remove that was unbound in the open function
-			// to allow for the parent page removal from actions other than the use
-			// of a dialog sized custom select
-			//
-			// doing this here provides for the back button on the custom select dialog
-			$.mobile._bindPageRemove.call( self.thisPage );
-		});
+		this._on( this.menuPage, { pagehide: "_handleMenuPageHide" } );
 
 		// Events on the popup
 		this.listbox.bind( "popupafterclose", function() {

From 571b4f3c4e784611b688f94c84e1e90206c1c865 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Tue, 18 Jun 2013 21:49:53 +0300
Subject: [PATCH 09/12] Custom select: Call the close() method upon
 "popupafterclose" by binding it via this._on().

---
 js/widgets/forms/select.custom.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 230c9f51fd2..9759280bf74 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -248,9 +248,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		this._on( this.menuPage, { pagehide: "_handleMenuPageHide" } );
 
 		// Events on the popup
-		this.listbox.bind( "popupafterclose", function() {
-			self.close();
-		});
+		this._on( this.listbox, { popupafterclose: "close" } );
 
 		// Close button on small overlays
 		if ( this.isMultiple ) {

From bdf50bf5e0b80f40bf10a391e0f430552972faf7 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Wed, 19 Jun 2013 00:13:31 +0300
Subject: [PATCH 10/12] Custom select: Moving binding that closes popup when
 the user clicks onto the header's close button into the widget prototype and
 calling it _handleHeaderCloseClick().

---
 js/widgets/forms/select.custom.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 9759280bf74..5fc7d608d95 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -120,6 +120,13 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		$.mobile._bindPageRemove.call( this.thisPage );
 	},
 
+	_handleHeaderCloseClick: function() {
+		if ( this.menuType === "overlay" ) {
+			this.close();
+			return false;
+		}
+	},
+
 	build: function() {
 		var selectId, prefix, popupId, dialogId, label, thisPage, isMultiple, menuId, themeAttr, overlayThemeAttr,
 			dividerThemeAttr, menuPage, listbox, list, header, headerTitle, menuPageContent, menuPageClose, headerClose, self,
@@ -252,12 +259,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 
 		// Close button on small overlays
 		if ( this.isMultiple ) {
-			this.headerClose.click(function() {
-				if ( self.menuType === "overlay" ) {
-					self.close();
-					return false;
-				}
-			});
+			this._on( this.headerClose, { click: "_handleHeaderCloseClick" } );
 		}
 
 		// track this dependency so that when the parent page

From a30522ee1154ea189236fe03b756e375072f7fab Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Wed, 19 Jun 2013 00:25:35 +0300
Subject: [PATCH 11/12] Custom select: Adding the menu page to the list of
 dependents has no effect, removing.

---
 js/widgets/forms/select.custom.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 5fc7d608d95..0dbefad0edc 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -262,10 +262,6 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			this._on( this.headerClose, { click: "_handleHeaderCloseClick" } );
 		}
 
-		// track this dependency so that when the parent page
-		// is removed on pagehide it will also remove the menupage
-		this.thisPage.addDependents( this.menuPage );
-
 		return this;
 	},
 

From e7691a7c07ea40cf222930d59e41ad6d6395d150 Mon Sep 17 00:00:00 2001
From: Gabriel Schulhof <gabriel.schulhof@intel.com>
Date: Wed, 19 Jun 2013 11:41:16 +0300
Subject: [PATCH 12/12] Custom select: Moving focusMenuItem() into the widget
 prototype and calling it _focusMenuItem().

---
 js/widgets/forms/select.custom.js | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
index 0dbefad0edc..d7d5e96883d 100644
--- a/js/widgets/forms/select.custom.js
+++ b/js/widgets/forms/select.custom.js
@@ -344,6 +344,14 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		this.button.click();
 	},
 
+	_focusMenuItem: function() {
+		var selector = this.list.find( "a." + $.mobile.activeBtnClass );
+		if ( selector.length === 0 ) {
+			selector = this.list.find( "li:not(" + unfocusableItemSelector + ") a.ui-btn" );
+		}
+		selector.first().focus();
+	},
+
 	_decideFormat: function() {
 		var self = this,
 			$window = $.mobile.window,
@@ -353,14 +361,6 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 			btnOffset = self.button.offset().top,
 			screenHeight = $window.height();
 
-		function focusMenuItem() {
-			var selector = self.list.find( "a." + $.mobile.activeBtnClass );
-			if ( selector.length === 0 ) {
-				selector = self.list.find( "li:not(" + unfocusableItemSelector + ") a.ui-btn" );
-			}
-			selector.first().focus();
-		}
-
 		if ( menuHeight > screenHeight - 80 || !$.support.scrollTop ) {
 
 			self.menuPage.appendTo( $.mobile.pageContainer ).page();
@@ -379,13 +379,10 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 				});
 			}
 
-			self.menuPage
-				.one( "pageshow", function() {
-					focusMenuItem();
-				})
-				.one( "pagehide", function() {
-					self.close();
-				});
+			self.menuPage.one( {
+				pageshow: $.proxy( this, "_focusMenuItem" ),
+				pagehide: $.proxy( this, "close" )
+			});
 
 			self.menuType = "page";
 			self.menuPageContent.append( self.list );
@@ -393,7 +390,7 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
 		} else {
 			self.menuType = "overlay";
 
-			self.listbox.one( "popupafteropen", focusMenuItem );
+			self.listbox.one( { popupafteropen: $.proxy( this, "_focusMenuItem" ) } );
 		}
 	},