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

feat(search): focus input when dropdown has been opened

Browse source
This commit is contained in:
Valentin Kaelin 2020-08-24 14:54:09 +02:00
parent ab9d10483d
commit bc65363bec
1 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@
ref="input" ref="input"
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
:value="value" :value="value"
class="w-full px-12 py-2 pr-4 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760" class="w-full px-12 py-2 pr-4 placeholder-blue-200 placeholder-opacity-75 bg-blue-700 border border-blue-500 rounded-md outline-none focus:bg-blue-760 summoner-input"
type="text" type="text"
placeholder="Search summoner" placeholder="Search summoner"
spellcheck="false" spellcheck="false"
@ -165,7 +165,8 @@ export default {
}, },
mounted() { mounted() {
this.$refs.searches.focus() const input = document.querySelector('.summoner-input')
input.focus()
this.recentSearchesCount = this.$refs.searches ? this.$refs.searches.children.length : 0 this.recentSearchesCount = this.$refs.searches ? this.$refs.searches.children.length : 0
this.favoritesCount = this.$refs.favorites ? this.$refs.favorites.children.length : 0 this.favoritesCount = this.$refs.favorites ? this.$refs.favorites.children.length : 0
this.totalCount = this.recentSearchesCount + this.favoritesCount this.totalCount = this.recentSearchesCount + this.favoritesCount
@ -219,8 +220,8 @@ export default {
(e.key === 'k' && (e.ctrlKey || e.metaKey))) { (e.key === 'k' && (e.ctrlKey || e.metaKey))) {
return return
} }
const input = document.querySelector('.summoner-input')
this.$refs.input.focus() input.focus()
}, },
onArrow() { onArrow() {
const scrollIntoBlock = this.selected === 1 ? 'end' : 'nearest' const scrollIntoBlock = this.selected === 1 ? 'end' : 'nearest'