Fix the trending and watch pages swallowing the arrow key events (#3170)

* Fix the trending page swallowing the arrow key events

* Fix the watch page too
This commit is contained in:
absidue 2023-02-10 18:44:17 +01:00 committed by GitHub
parent 4c65982371
commit a26c8e03a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 12 deletions

View File

@ -1838,8 +1838,11 @@ export default defineComponent({
},
// This function should always be at the bottom of this file
/**
* @param {KeyboardEvent} event
*/
keyboardShortcutHandler: function (event) {
if (document.activeElement.classList.contains('ft-input')) {
if (document.activeElement.classList.contains('ft-input') || event.altKey) {
return
}

View File

@ -69,9 +69,16 @@ export default defineComponent({
}
},
focusTab: function (tab) {
this.$refs[tab].focus()
this.$emit('showOutlines')
/**
* @param {KeyboardEvent} event
* @param {string} tab
*/
focusTab: function (event, tab) {
if (!event.altKey) {
event.preventDefault()
this.$refs[tab].focus()
this.$emit('showOutlines')
}
},
getTrendingInfo: function () {

View File

@ -24,8 +24,8 @@
:class="{ selectedTab: currentTab === 'default' }"
@click="changeTab('default')"
@keydown.space.enter.prevent="changeTab('default')"
@keydown.left.prevent="focusTab('movies')"
@keydown.right.prevent="focusTab('music')"
@keydown.left="focusTab($event, 'movies')"
@keydown.right="focusTab($event, 'music')"
>
{{ $t("Trending.Default").toUpperCase() }}
</div>
@ -39,8 +39,8 @@
:class="{ selectedTab: currentTab === 'music' }"
@click="changeTab('music')"
@keydown.space.enter.prevent="changeTab('music')"
@keydown.left.prevent="focusTab('default')"
@keydown.right.prevent="focusTab('gaming')"
@keydown.left="focusTab($event, 'default')"
@keydown.right="focusTab($event, 'gaming')"
>
{{ $t("Trending.Music").toUpperCase() }}
</div>
@ -54,8 +54,8 @@
:class="{ selectedTab: currentTab === 'gaming' }"
@click="changeTab('gaming')"
@keydown.space.enter.prevent="changeTab('gaming')"
@keydown.left.prevent="focusTab('music')"
@keydown.right.prevent="focusTab('movies')"
@keydown.left="focusTab($event, 'music')"
@keydown.right="focusTab($event, 'movies')"
>
{{ $t("Trending.Gaming").toUpperCase() }}
</div>
@ -69,8 +69,8 @@
:class="{ selectedTab: currentTab === 'movies' }"
@click="changeTab('movies')"
@keydown.space.enter.prevent="changeTab('movies')"
@keydown.left.prevent="focusTab('gaming')"
@keydown.right.prevent="focusTab('default')"
@keydown.left="focusTab($event, 'gaming')"
@keydown.right="focusTab($event, 'default')"
>
{{ $t("Trending.Movies").toUpperCase() }}
</div>