From 256ef11c99fb8a2f8b0a789cc2ae4416ef7d7733 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 26 Jun 2022 21:28:37 +1000
Subject: Auto-select first search-suggestion result

---
 src/components/SearchModal.vue | 33 +++++++++++++--------------------
 1 file changed, 13 insertions(+), 20 deletions(-)

(limited to 'src/components/SearchModal.vue')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index d14173f..b1d95db 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -87,7 +87,12 @@ export default defineComponent({
 				}
 				this.searchSuggs = responseObj.suggs;
 				this.searchHadMoreSuggs = responseObj.hasMore;
-				this.focusedSuggIdx = null;
+				// Auto-select first result if present
+				if (this.searchSuggs.length > 0){
+					this.focusedSuggIdx = 0;
+				} else {
+					this.focusedSuggIdx = null;
+				}
 			};
 			let currentTime = new Date().getTime();
 			if (this.lastSuggReqTime == 0){
@@ -111,33 +116,21 @@ export default defineComponent({
 			this.$emit('info-click', nodeName);
 		},
 		onDownKey(){
-			// Select next search-suggestion, possibly cycling back to top
-			if (this.searchSuggs.length > 0){
-				if (this.focusedSuggIdx == null){
-					this.focusedSuggIdx = 0;
-				} else if (this.focusedSuggIdx == this.searchSuggs.length - 1){
-					this.focusedSuggIdx = null;
-				} else {
-					this.focusedSuggIdx += 1;
-				}
+			if (this.focusedSuggIdx != null){
+				this.focusedSuggIdx = (this.focusedSuggIdx + 1) % this.searchSuggs.length;
 			}
 		},
 		onUpKey(){
-			// Select previous search-suggestion, possibly cycling to bottom
-			if (this.searchSuggs.length > 0){
-				if (this.focusedSuggIdx == null){
-					this.focusedSuggIdx = this.searchSuggs.length - 1;
-				} else if (this.focusedSuggIdx == 0){
-					this.focusedSuggIdx = null;
-				} else {
-					this.focusedSuggIdx -= 1;
-				}
+			if (this.focusedSuggIdx != null){
+				this.focusedSuggIdx = (this.focusedSuggIdx - 1 + this.searchSuggs.length) % this.searchSuggs.length;
+					// The addition after -1 is to avoid becoming negative
 			}
 		},
 		// Search events
 		onSearch(){
 			if (this.focusedSuggIdx == null){
-				this.resolveSearch((this.$refs.searchInput as HTMLInputElement).value.toLowerCase())
+				let input = (this.$refs.searchInput as HTMLInputElement).value.toLowerCase();
+				this.resolveSearch(input)
 			} else {
 				let sugg = this.searchSuggs[this.focusedSuggIdx]
 				this.resolveSearch(sugg.canonicalName || sugg.name);
-- 
cgit v1.2.3

