Fix flickering pre-loaded search results when focusing the search input
This commit is contained in:
parent
7b99d96df0
commit
2b7e9856d8
1 changed files with 8 additions and 1 deletions
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue