From c6e4221966244518054a1643e3e2ab4ccf586ad9 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 13 Dec 2022 15:36:18 -0500
Subject: [PATCH] Fix ft-input keyboard naviagation (#2943)

---
 src/renderer/components/ft-input/ft-input.js  | 45 +++++++++++--------
 src/renderer/components/ft-input/ft-input.vue |  1 -
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index 54ac740e414ed..5462bcd4de961 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -196,27 +196,36 @@ export default Vue.extend({
 
     handleKeyDown: function (event) {
       if (this.visibleDataList.length === 0) { return }
-      // Update selectedOption based on arrow key pressed
-      if (event.key === 'ArrowDown') {
-        this.searchState.selectedOption = (this.searchState.selectedOption + 1) % this.visibleDataList.length
-      } else if (event.key === 'ArrowUp') {
-        if (this.searchState.selectedOption < 1) {
-          this.searchState.selectedOption = this.visibleDataList.length - 1
-        } else {
-          this.searchState.selectedOption--
+      if (event.key === 'Enter') {
+        this.inputData = this.visibleDataList[this.searchState.selectedOption]
+        // Update Input box value if enter key was pressed and option selected
+        if (this.searchState.selectedOption !== -1) {
+          this.searchState.showOptions = false
+          event.preventDefault()
+          this.inputData = this.visibleDataList[this.searchState.selectedOption]
+          this.handleClick()
         }
       } else {
-        this.searchState.selectedOption = -1
-      }
-
-      // Key pressed isn't enter
-      if (event.key !== 'Enter') {
         this.searchState.showOptions = true
-      }
-      // Update Input box value if arrow keys were pressed
-      if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && this.searchState.selectedOption !== -1) {
-        event.preventDefault()
-        this.inputData = this.visibleDataList[this.searchState.selectedOption]
+        const isArrow = event.key === 'ArrowDown' || event.key === 'ArrowUp'
+        if (isArrow) {
+          if (event.key === 'ArrowDown') {
+            this.searchState.selectedOption = (this.searchState.selectedOption + 1) % this.visibleDataList.length
+          } else if (event.key === 'ArrowUp') {
+            if (this.searchState.selectedOption < 1) {
+              this.searchState.selectedOption = this.visibleDataList.length - 1
+            } else {
+              this.searchState.selectedOption--
+            }
+          }
+          if (this.searchState.selectedOption < 0) {
+            this.searchState.selectedOption = this.visibleDataList.length
+          } else if (this.searchState.selectedOption > this.visibleDataList.length - 1) {
+            this.searchState.selectedOption = 0
+          }
+        } else {
+          this.searchState.selectedOption = -1
+        }
       }
     },
 
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index bdc007b5dfc47..a0709b6ea6df7 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -51,7 +51,6 @@
       @focus="handleFocus"
       @blur="handleInputBlur"
       @keydown="handleKeyDown"
-      @keydown.enter="handleClick"
     >
     <font-awesome-icon
       v-if="showActionButton"