Fixes search suggestion issues with arrow keys (#2370)

* Fix cursor moving while cycling through search suggestions

* Fix the search suggestions changing for all keyboard events

* Remove use of deprecated event.keyCode

src/renderer/components/ft-input/ft-input.js

@@ -184,7 +184,7 @@ export default Vue.extend({
 
       if (inputElement !== null) {
         inputElement.addEventListener('keydown', (event) => {
-          if (event.keyCode === 13) {
+          if (event.key === 'Enter') {
             this.handleClick()
           }
         })
@@ -198,12 +198,12 @@ export default Vue.extend({
       this.handleClick()
     },
 
-    handleKeyDown: function (keyCode) {
+    handleKeyDown: function (event) {
       if (this.visibleDataList.length === 0) { return }
       // Update selectedOption based on arrow key pressed
-      if (keyCode === 40) {
+      if (event.key === 'ArrowDown') {
         this.searchState.selectedOption = (this.searchState.selectedOption + 1) % this.visibleDataList.length
-      } else if (keyCode === 38) {
+      } else if (event.key === 'ArrowUp') {
         if (this.searchState.selectedOption < 1) {
           this.searchState.selectedOption = this.visibleDataList.length - 1
         } else {
@@ -214,14 +214,13 @@ export default Vue.extend({
       }
 
       // Key pressed isn't enter
-      if (keyCode !== 13) {
+      if (event.key !== 'Enter') {
         this.searchState.showOptions = true
       }
       // Update Input box value if arrow keys were pressed
-      if ((keyCode === 40 || keyCode === 38) && this.searchState.selectedOption !== -1) {
+      if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && this.searchState.selectedOption !== -1) {
+        event.preventDefault()
         this.inputData = this.visibleDataList[this.searchState.selectedOption]
-      } else {
-        this.updateVisibleDataList()
       }
     },
 

src/renderer/components/ft-input/ft-input.vue

@@ -49,7 +49,7 @@
       @input="e => handleInput(e.target.value)"
       @focus="handleFocus"
       @blur="handleInputBlur"
-      @keydown="e => handleKeyDown(e.keyCode)"
+      @keydown="handleKeyDown"
     >
     <font-awesome-icon
       v-if="showActionButton"