tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
absidue 2022-07-09 19:30:57 +02:00 committed by GitHub
parent 0a47b01306
commit 60d07aa99d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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