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

feat(search): focus input when user start typing

Browse source
This commit is contained in:
Valentin Kaelin 2020-08-24 14:41:53 +02:00
parent c10e1485a8
commit ab9d10483d
2 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -105,15 +105,16 @@ export default {
const header = document.querySelector('.header div') const header = document.querySelector('.header div')
// Search Dropdown open // Search Dropdown open
if (newVal) { if (newVal) {
console.log(this.getScrollbarWidth())
if (!this.homepage) { if (!this.homepage) {
document.body.style.marginLeft = `-${this.getScrollbarWidth()}px` document.body.style.marginLeft = `-${this.getScrollbarWidth()}px`
header.style.paddingRight = `${this.getScrollbarWidth()}px` header.style.paddingRight = `${this.getScrollbarWidth()}px`
} }
document.body.style.overflow = 'hidden' document.body.style.overflow = 'hidden'
} else { } else {
document.body.style.marginLeft = 0 if (!this.homepage) {
header.style.paddingRight = 0 header.style.paddingRight = 0
}
document.body.style.marginLeft = 0
document.body.style.overflow = 'auto' document.body.style.overflow = 'auto'
} }
}, },
@ -128,12 +129,12 @@ export default {
this.summoner = this.$route.params.name this.summoner = this.$route.params.name
} }
window.addEventListener('blur', this.windowBlur) window.addEventListener('blur', this.windowBlur)
document.addEventListener('keydown', this.handleEscape) window.addEventListener('keydown', this.handleEscape)
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('blur', this.windowBlur) window.removeEventListener('blur', this.windowBlur)
document.removeEventListener('keydown', this.handleEscape) window.removeEventListener('keydown', this.handleEscape)
}, },
methods: { methods: {

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

@ -12,6 +12,7 @@
</svg> </svg>
</button> </button>
<input <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"
@ -37,8 +38,6 @@
</div> </div>
<div <div
ref="searches" ref="searches"
@keydown.prevent.up="onArrowUp()"
@keydown.prevent.down="onArrowDown()"
@keydown.prevent.stop.enter="onOptionSelect()" @keydown.prevent.stop.enter="onOptionSelect()"
@keydown.prevent.stop.space="onOptionSelect()" @keydown.prevent.stop.space="onOptionSelect()"
role="listbox" role="listbox"
@ -71,8 +70,6 @@
<div class="text-base text-blue-100">Favorites</div> <div class="text-base text-blue-100">Favorites</div>
<div <div
ref="favorites" ref="favorites"
@keydown.prevent.up="onArrowUp()"
@keydown.prevent.down="onArrowDown()"
@keydown.prevent.stop.enter="onOptionSelect()" @keydown.prevent.stop.enter="onOptionSelect()"
@keydown.prevent.stop.space="onOptionSelect()" @keydown.prevent.stop.space="onOptionSelect()"
role="listbox" role="listbox"
@ -144,6 +141,7 @@ export default {
data() { data() {
return { return {
bypassKeys: ['Esc', 'Escape', 'ArrowUp', 'ArrowDown', 'Enter', 'Space', '/'],
favoritesCount: null, favoritesCount: null,
totalCount: null, totalCount: null,
recentSearchesCount: null, recentSearchesCount: null,
@ -163,6 +161,7 @@ export default {
created() { created() {
window.addEventListener('mousedown', this.handleClick) window.addEventListener('mousedown', this.handleClick)
window.addEventListener('keydown', this.handleKeyDown)
}, },
mounted() { mounted() {
@ -178,6 +177,7 @@ export default {
beforeDestroy() { beforeDestroy() {
window.removeEventListener('mousedown', this.handleClick) window.removeEventListener('mousedown', this.handleClick)
window.removeEventListener('keydown', this.handleKeyDown)
}, },
methods: { methods: {
@ -204,6 +204,24 @@ export default {
e.preventDefault() e.preventDefault()
this.$refs.searches.focus() this.$refs.searches.focus()
}, },
handleKeyDown(e) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault()
this.$refs.searches.focus()
if (e.key === 'ArrowUp') {
this.onArrowUp()
} else {
this.onArrowDown()
}
}
if (this.bypassKeys.includes(e.key) ||
(e.key === 'k' && (e.ctrlKey || e.metaKey))) {
return
}
this.$refs.input.focus()
},
onArrow() { onArrow() {
const scrollIntoBlock = this.selected === 1 ? 'end' : 'nearest' const scrollIntoBlock = this.selected === 1 ? 'end' : 'nearest'
if (this.selected > this.recentSearchesCount) { if (this.selected > this.recentSearchesCount) {