Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(search): prevent menu flickering when the mouse was hovering items

Browse source
This commit is contained in:
Valentin Kaelin 2020-08-25 15:54:25 +02:00
parent d60575e651
commit dc68fa3186
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/Form/SearchFormDropdown.vue
View file

@ -58,8 +58,7 @@
<SearchFormDropdownPlayer <SearchFormDropdownPlayer
v-for="(player, index) in recentSearchesSliced" v-for="(player, index) in recentSearchesSliced"
:key="player.name + player.region" :key="player.name + player.region"
@mouseenter.native="selected = index + 1" @mousemove.native="onHover(index + 1)"
@mouseleave.native="selected = null"
:selected="index === selected - 1" :selected="index === selected - 1"
:player="player" :player="player"
:favorites-list="false" :favorites-list="false"
@ -67,8 +66,7 @@
</template> </template>
<template v-else-if="favorites.length === 0"> <template v-else-if="favorites.length === 0">
<SearchFormDropdownPlayer <SearchFormDropdownPlayer
@mouseenter.native="selected = 1" @mousemove.native="onHover(1)"
@mouseleave.native="selected = null"
:player="{name: 'Alderiate', icon: 1150, region: 'euw'}" :player="{name: 'Alderiate', icon: 1150, region: 'euw'}"
:selected="selected === 1" :selected="selected === 1"
:favorites-list="false" :favorites-list="false"
@ -89,8 +87,7 @@
<SearchFormDropdownPlayer <SearchFormDropdownPlayer
v-for="(player, index) in favorites" v-for="(player, index) in favorites"
:key="player.name + player.region" :key="player.name + player.region"
@mouseenter.native="selected = index + recentSearchesCount + 1" @mousemove.native="onHover(index + recentSearchesCount + 1)"
@mouseleave.native="selected = null"
:player="player" :player="player"
:selected="index === selected - 1 - recentSearchesCount" :selected="index === selected - 1 - recentSearchesCount"
:favorites-list="true" :favorites-list="true"
@ -234,7 +231,7 @@ export default {
input.focus() input.focus()
}, },
onArrow() { onArrow() {
const scrollIntoBlock = this.selected === 1 ? 'end' : 'nearest' const scrollIntoBlock = this.selected === 1 ? 'end' : (this.selected >= 7 ? 'start' : 'nearest')
if (this.selected > this.recentSearchesCount) { if (this.selected > this.recentSearchesCount) {
this.$refs.favorites.children[this.selected - this.recentSearchesCount - 1].scrollIntoView({ block: scrollIntoBlock }) this.$refs.favorites.children[this.selected - this.recentSearchesCount - 1].scrollIntoView({ block: scrollIntoBlock })
} else { } else {
@ -249,7 +246,16 @@ export default {
this.selected = this.selected + 1 > this.totalCount ? 1 : this.selected + 1 this.selected = this.selected + 1 > this.totalCount ? 1 : this.selected + 1
this.onArrow() this.onArrow()
}, },
async onHover(id) {
this.selected = id
if (this.$refs.searches !== document.activeElement) {
await this.$nextTick()
this.$refs.searches.focus()
}
},
onOptionSelect() { onOptionSelect() {
console.log('OPTION SELECT')
if (this.selected === null) { if (this.selected === null) {
return return
} }