Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update ft-input for top navbar search input to behave more like Youtube one #3793

Merged
Merged
63 changes: 44 additions & 19 deletions src/renderer/components/ft-input/ft-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -128,11 +145,15 @@ export default defineComponent({
if (!this.inputDataPresent) { return }

this.searchState.showOptions = false
this.searchState.selectedOption = -1
this.searchState.keyboardSelectedOptionIndex = -1
this.$emit('input', this.inputData)
this.$emit('click', this.inputData, { event: e })
},

handleInput: function (val) {
this.inputData = val

if (this.isSearch &&
this.searchState.selectedOption !== -1 &&
this.inputData === this.visibleDataList[this.searchState.selectedOption]) { return }
Expand Down Expand Up @@ -229,25 +250,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 () {
Expand Down
5 changes: 3 additions & 2 deletions src/renderer/components/ft-input/ft-input.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<input
:id="id"
ref="input"
v-model="inputData"
:value="inputDataDisplayed"
:list="idDataList"
class="ft-input"
:type="inputType"
Expand Down Expand Up @@ -77,9 +77,10 @@
<li
v-for="(list, index) in visibleDataList"
:key="index"
:class="searchState.selectedOption == index ? 'hover': ''"
:class="searchState.selectedOption === index ? 'hover': ''"
@click="handleOptionClick(index)"
@mouseenter="searchState.selectedOption = index"
@mouseleave="searchState.selectedOption = -1"
>
{{ list }}
</li>
Expand Down