* Update ft-input for top navbar search input to behave more like You…

…tube one
FreeTubeApp · Jul 20, 2023 · fe0c0a6 · fe0c0a6
1 parent dbb8ed0
commit fe0c0a6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
@@ -73,7 +73,8 @@ export default defineComponent({
       searchState: {
         showOptions: false,
         selectedOption: -1,
-        isPointerInList: false
+        isPointerInList: false,
+        keyboardSelectedOptionIndex: -1,
       },
       visibleDataList: this.dataList,
       // This button should be invisible on app start
@@ -98,7 +99,23 @@ export default defineComponent({
 
     inputDataPresent: function () {
       return this.inputData.length > 0
-    }
+    },
+    inputDataDisplayed() {
+      if (!this.isSearch) { return this.inputData }
+
+      const selectedOptionValue = this.searchStateKeyboardSelectedOptionValue
+      if (selectedOptionValue != null && selectedOptionValue !== '') {
+        return selectedOptionValue
+      }
+
+      return this.inputData
+    },
+
+    searchStateKeyboardSelectedOptionValue() {
+      if (this.searchState.keyboardSelectedOptionIndex === -1) { return null }
+
+      return this.visibleDataList[this.searchState.keyboardSelectedOptionIndex]
+    },
   },
   watch: {
     dataList(val, oldVal) {
@@ -133,6 +150,8 @@ export default defineComponent({
     },
 
     handleInput: function (val) {
+      this.inputData = val
+
       if (this.isSearch &&
         this.searchState.selectedOption !== -1 &&
         this.inputData === this.visibleDataList[this.searchState.selectedOption]) { return }
@@ -229,25 +248,29 @@ export default defineComponent({
 
       this.searchState.showOptions = true
       const isArrow = event.key === 'ArrowDown' || event.key === 'ArrowUp'
-      if (isArrow) {
-        event.preventDefault()
-        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 {
+      if (!isArrow) {
         this.searchState.selectedOption = -1
+        this.searchState.keyboardSelectedOptionIndex = -1
+        return
+      }
+
+      event.preventDefault()
+      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
       }
+      // Update displayed value
+      this.searchState.keyboardSelectedOptionIndex = this.searchState.selectedOption
     },
 
     handleInputBlur: function () {

diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
@@ -42,7 +42,7 @@
       <input
         :id="id"
         ref="input"
-        v-model="inputData"
+        :value="inputDataDisplayed"
         :list="idDataList"
         class="ft-input"
         :type="inputType"