lasers/FreeTube
1
0
Fork 0
mirror of https://github.com/FreeTubeApp/FreeTube synced 2025-01-24 02:30:57 +01:00
Code Issues Projects Releases Wiki Activity

Fix ft-input keyboard naviagation (#2943)

Browse Source
This commit is contained in:
ChunkyProgrammer 2022-12-13 15:36:18 -05:00 committed by GitHub
parent 36fc9468c2
commit c6e4221966
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/renderer/components/ft-input/ft-input.js
View File

@ -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
}
}
},

1
src/renderer/components/ft-input/ft-input.vue
View File

@ -51,7 +51,6 @@
@focus="handleFocus"
@blur="handleInputBlur"
@keydown="handleKeyDown"
@keydown.enter="handleClick"
>
<font-awesome-icon
v-if="showActionButton"