Fix Lookup menu navigation index reset issue on arrow down (#656)

Bug: T324743 Co-authored-by: Michael Große <[email protected]> Co-authored-by: Lucas Werkmeister <[email protected]>
wmde · Dec 21, 2022 · 71c8514 · 71c8514
1 parent 99330af
commit 71c8514
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git 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
@@ -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"