From 3b0aff2df70e9dc9533c9a607602433b7d34333e Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Tue, 30 May 2017 14:29:35 +0300
Subject: [PATCH] RCFilters: Unify 'highlight' and 'selected' items

When moving with the arrows, we don't want a distinction between
the 'selected' and 'highlighted' states, since those don't quite
make sense in RCFilters system. We unify those by always using
'selected' state; this also means that when searching AND when
opening the popup, the first item is 'selected' so the user can
hit 'enter' and add it in, or hit the up/down arrow keys and
move up and down in the list.

Bug: T159768
Change-Id: Ife62e6e7241b96d846d8c5851b173a09a1f45fa4
---
 .../ui/mw.rcfilters.ui.MenuSelectWidget.js    | 61 ++++++++++++++-----
 1 file changed, 47 insertions(+), 14 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
index 0dfbb4d1bb..91de969404 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js
@@ -86,7 +86,7 @@
 	 */
 	mw.rcfilters.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
 		var i,
-			itemWasHighlighted = false,
+			itemWasSelected = false,
 			inputVal = this.$input.val(),
 			items = this.getItems();
 
@@ -96,22 +96,20 @@
 			// Parent method
 			mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
 
-			if ( inputVal !== '' ) {
-				// Highlight the first item in the list
-				for ( i = 0; i < items.length; i++ ) {
-					if (
-						!( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
-						items[ i ].isVisible()
-					) {
-						itemWasHighlighted = true;
-						this.highlightItem( items[ i ] );
-						break;
-					}
+			// Select the first item in the list
+			for ( i = 0; i < items.length; i++ ) {
+				if (
+					!( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
+					items[ i ].isVisible()
+				) {
+					itemWasSelected = true;
+					this.selectItem( items[ i ] );
+					break;
 				}
 			}
 
-			if ( !itemWasHighlighted ) {
-				this.highlightItem( null );
+			if ( !itemWasSelected ) {
+				this.selectItem( null );
 			}
 
 			// Cache value
@@ -134,6 +132,41 @@
 		};
 	};
 
+	/**
+	 * @inheritdoc
+	 */
+	mw.rcfilters.ui.MenuSelectWidget.prototype.onKeyDown = function ( e ) {
+		var nextItem,
+			currentItem = this.getHighlightedItem() || this.getSelectedItem();
+
+		// Call parent
+		mw.rcfilters.ui.MenuSelectWidget.parent.prototype.onKeyDown.call( this, e );
+
+		// We want to select the item on arrow movement
+		// rather than just highlight it, like the menu
+		// does by default
+		if ( !this.isDisabled() && this.isVisible() ) {
+			switch ( e.keyCode ) {
+				case OO.ui.Keys.UP:
+				case OO.ui.Keys.LEFT:
+					// Get the next item
+					nextItem = this.getRelativeSelectableItem( currentItem, -1 );
+					break;
+				case OO.ui.Keys.DOWN:
+				case OO.ui.Keys.RIGHT:
+					// Get the next item
+					nextItem = this.getRelativeSelectableItem( currentItem, 1 );
+					break;
+			}
+
+			nextItem = nextItem && nextItem.constructor.static.selectable ?
+				nextItem : null;
+
+			// Select the next item
+			this.selectItem( nextItem );
+		}
+	};
+
 	/**
 	 * Scroll to the top of the menu
 	 */
-- 
2.20.1