From 58558b26fd5bc87fb9381bbabef9bf9a8199d333 Mon Sep 17 00:00:00 2001
From: Rob Moen <rmoen@wikimedia.org>
Date: Fri, 17 Aug 2012 15:13:19 -0700
Subject: [PATCH] VE multiSuggest bug fixes.

-Using keydown on arrows allows preventDefault which stops the cursor movement in the input.

-Consolidated Keydown bindings, no longer unbinding keydown, instead checking for visible state first.

-Using case insensitive comparison for selected item.

-Changed use of ve.inArray to ve.indexOf because method name was changed.

-Moved clear break into suggestion container rather than after it.
Added margin bottom on suggestion container for category separation.

Change-Id: I2bd1db049a948db189194037dc8e38dfe884c197
---
 modules/jquery/jquery.multiSuggest.js         | 48 ++++++++-----------
 .../ve/ui/inspectors/ve.ui.LinkInspector.js   |  2 +-
 modules/ve/ui/styles/ve.ui.Inspector.css      |  7 ++-
 3 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/modules/jquery/jquery.multiSuggest.js b/modules/jquery/jquery.multiSuggest.js
index 3b3c2ace73..d9a9337156 100644
--- a/modules/jquery/jquery.multiSuggest.js
+++ b/modules/jquery/jquery.multiSuggest.js
@@ -120,36 +120,15 @@
 							visible = true;
 							$multiSuggest.show();
 						}
-						bindKeyDown();
 					}
 				}
 			}
-			// Binds a keydown event to override default behavior for enter key.
-			// Binds on open, unbinds on close.
-			function bindKeyDown() {
-				$input.on( 'keydown', function( e ) {
-					var $item;
-					// Enter key.
-					if ( e.which === 13 ) {
-						e.preventDefault();
-						$item = $multiSuggest
-							.find( '.' + options.prefix + '-suggest-item.selected' );
-						if ( $item.length > 0 ) {
-							select.call( this, $item.text() );
-						} else {
-							close();
-						}
-						return;
-					}
-				} );
-			}
 			// Closes the dropdown.
 			function close() {
 				if ( visible ) {
 					setTimeout( function() {
 						visible = false;
 						$multiSuggest.hide();
-						$input.unbind( 'keydown' );
 					}, 100 );
 				}
 			}
@@ -186,14 +165,13 @@
 					).append(
 						$( '<div>', options.doc )
 							.prop( 'class', options.prefix + '-suggest-wrap' )
-				);
-				// Add group
-				$multiSuggest
-					.append( $group )
 					// Add a clear break.
-					.append(
+					).append(
 						$( '<div>', options.doc ).css( 'clear', 'both' )
 					);
+				// Add group
+				$multiSuggest.append( $group );
+
 				// Find the group wrapper element.
 				$groupWrap = $group.find( '.' + options.prefix + '-suggest-wrap' );
 				// If no items, add a dummy element to take up space.
@@ -212,7 +190,7 @@
 						.on( 'mousedown', onItemMousedown )
 						.appendTo( $groupWrap );
 					// Select this item by default
-					if ( group.items[i] === $input.val() ) {
+					if ( group.items[i].toLowerCase() === $input.val().toLowerCase() ) {
 						$item.addClass( 'selected' );
 					}
 				}
@@ -258,7 +236,7 @@
 					}, 250 );
 				},
 				// Handle arrow up and down keys.
-				'keyup': function( e ) {
+				'keydown': function( e ) {
 					var $item,
 						$items = $multiSuggest
 							.find( '.' + options.prefix + '-suggest-item' ),
@@ -292,6 +270,20 @@
 						selected = ( selected + $items.length - 1 ) % $items.length;
 						$items.removeClass( 'selected' );
 						$( $items[selected] ).addClass( 'selected' );
+					// Enter key.
+					} else if ( e.which === 13 ) {
+						// Only if the dropdown is open.
+						if ( visible ) {
+							e.preventDefault();
+							$item = $multiSuggest
+								.find( '.' + options.prefix + '-suggest-item.selected' );
+							if ( $item.length > 0 ) {
+								select.call( this, $item.text() );
+							} else {
+								close();
+							}
+							return;
+						}
 					}
 				},
 				'focus': function(){
diff --git a/modules/ve/ui/inspectors/ve.ui.LinkInspector.js b/modules/ve/ui/inspectors/ve.ui.LinkInspector.js
index ddca166ec0..c11725aab5 100644
--- a/modules/ve/ui/inspectors/ve.ui.LinkInspector.js
+++ b/modules/ve/ui/inspectors/ve.ui.LinkInspector.js
@@ -270,7 +270,7 @@ ve.ui.LinkInspector.prototype.initMultiSuggest = function() {
 				title = new mw.Title( query );
 				modifiedQuery = title.getPrefixedText();
 				// If page doesn't exist, add New Page group.
-				if ( ve.inArray( modifiedQuery, results ) === -1 ) {
+				if ( ve.indexOf( modifiedQuery, results ) === -1 ) {
 					groups['new'] = {
 						label: ve.msg( 'visualeditor-linkinspector-suggest-new-page' ),
 						items: [modifiedQuery],
diff --git a/modules/ve/ui/styles/ve.ui.Inspector.css b/modules/ve/ui/styles/ve.ui.Inspector.css
index 60330e4d08..aa963bb108 100644
--- a/modules/ve/ui/styles/ve.ui.Inspector.css
+++ b/modules/ve/ui/styles/ve.ui.Inspector.css
@@ -106,7 +106,7 @@
 	background-image: url(images/gray.png);
 	background-position: 8em top;
 	background-repeat: repeat-y;
-	padding: 0.5em 0;
+	padding: 0.5em 0 0 0;
 	width: 20em;
 	font-size: 1em;
 	z-index: 101;
@@ -123,6 +123,11 @@
 	-moz-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
 	box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
 }
+
+.ve-ui-suggest-container {
+	margin-bottom: 0.5em;
+}
+
 .ve-ui-suggest-label {
 	float: left;
 	width: 6.5em;