Fix flickering pre-loaded search results when focusing the search input

This commit is contained in:
kolaente 2021-06-24 15:22:48 +02:00
parent 7b99d96df0
commit 2b7e9856d8
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B

View file

@ -28,7 +28,7 @@
:placeholder="placeholder" :placeholder="placeholder"
@keydown.down.exact.prevent="() => preSelect(0)" @keydown.down.exact.prevent="() => preSelect(0)"
ref="searchInput" ref="searchInput"
@focus="() => showSearchResults = true" @focus="handleFocus"
/> />
</div> </div>
</div> </div>
@ -258,6 +258,13 @@ export default {
closeSearchResults() { closeSearchResults() {
this.showSearchResults = false this.showSearchResults = false
}, },
handleFocus() {
// We need the timeout to avoid the hideSearchResultsHandler hiding the search results right after the input
// is focused. That would lead to flickering pre-loaded search results and hiding them right after showing.
setTimeout(() => {
this.showSearchResults = true
}, 10)
},
select(object) { select(object) {
if (this.multiple) { if (this.multiple) {
if (this.internalValue === null) { if (this.internalValue === null) {