From 71c851401e0b9ec79fac32130e15f90cc1d3e9ef Mon Sep 17 00:00:00 2001
From: Guergana Tzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Wed, 21 Dec 2022 11:28:03 +0100
Subject: [PATCH] Fix Lookup menu navigation index reset issue on arrow down
 (#656)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: T324743

Co-authored-by: Michael Große <micgro42@users.noreply.github.com>
Co-authored-by: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
---
 vue-components/src/components/OptionsMenu.vue |  4 ++-
 vue-components/stories/Lookup.stories.ts      | 35 +++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/vue-components/src/components/OptionsMenu.vue b/vue-components/src/components/OptionsMenu.vue
index 34ce8a996..ae8ef6975 100644
--- a/vue-components/src/components/OptionsMenu.vue
+++ b/vue-components/src/components/OptionsMenu.vue
@@ -193,7 +193,9 @@ export default Vue.extend( {
 	watch: {
 		async menuItems(): Promise<void> {
 			await this.$nextTick();
-			this.keyboardHoveredItemIndex = this.selectedItemIndex;
+			if ( this.selectedItemIndex > -1 ) {
+				this.keyboardHoveredItemIndex = this.selectedItemIndex;
+			}
 			this.resizeMenu();
 		},
 		keyboardHoveredItemIndex( hoveredIndex: number ): void {
diff --git a/vue-components/stories/Lookup.stories.ts b/vue-components/stories/Lookup.stories.ts
index f08e6edaa..54e9b54dc 100644
--- a/vue-components/stories/Lookup.stories.ts
+++ b/vue-components/stories/Lookup.stories.ts
@@ -1,7 +1,7 @@
 import Lookup from '@/components/Lookup';
 import Icon from '@/components/Icon';
-import { Component } from 'vue';
 import { MenuItem } from '@/components/MenuItem';
+import { Component } from 'vue';
 
 export default {
 	component: Lookup,
@@ -67,6 +67,24 @@ const vegetableItems = [
 	},
 ];
 
+const itemsToAddOnScroll = [
+	{
+		label: 'passionfruit',
+		description: 'sour sweet tropical fruit',
+		value: 'Q165449',
+	},
+	{
+		label: 'jackfruit',
+		description: 'edible fruit of the jack tree',
+		value: 'Q16136843',
+	},
+	{
+		label: 'sweet potato',
+		description: 'a potato like root vegetable with a sweet taste',
+		value: 'Q37937',
+	},
+];
+
 export function all(): Component {
 	return {
 		components: { Lookup, Icon },
@@ -75,21 +93,32 @@ export function all(): Component {
 				search: '',
 				selectedItem: null,
 				visibleItems: null,
+				menuVegetableItems: vegetableItems,
 			};
 		},
 		computed: {
-			menuItems(): MenuItem[] {
-				return vegetableItems.filter( ( item ) => item.label.includes( this.search ) );
+			menuItems: {
+				get(): MenuItem[] {
+					return this.menuVegetableItems.filter( ( item ) => item.label.includes( this.search ) );
+				},
+				set( newMenuItems: MenuItem[] ): void {
+					this.menuVegetableItems = newMenuItems;
+				},
 			},
 		},
 		methods: {
 			onScroll( firstIndex: number, lastIndex: number ): void {
 				this.visibleItems = { firstIndex, lastIndex };
+				if ( lastIndex === this.menuItems.length - 1 ) {
+					this.menuItems = [ ...vegetableItems, ...itemsToAddOnScroll ];
+				}
 			},
 		},
 		template: `
 			<div>
 				<div style="margin-bottom: 20px">
+					<p>Try pressing <kbd>a</kbd> to see several search results. 
+					Some additional results will load when you scroll.</p>
 					<Lookup
 						:search-input.sync="search"
 						label="Label"