menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Mockupless

Design testable prototypes with code

Channels
Team

Search input task

March 13, 2019 at 9:38pm

Search input task

March 13, 2019 at 9:38pm
Hello Andrew!
During the home task on Events—Other events—-Task with creating a search input field. Is it possible to hide the box which contains hint and suggestions after you move the focus from the search input? For now, it stays there unless I start typing and hit the ‘clear’ button. I tried to use the ‘blur’ event but it broke the autocomplete functionality: when I was clicking on any of the suggested options, blur event was firing off first and the box with suggestions was disappearing prior to putting the selected option into the input.

March 13, 2019 at 11:16pm
Hi, Anastasiia! You're on the right track, but a little more coding is required to achieve the behavior you expect.
is the proper event listener for the task, but it does react before click event listeners doo. To fix this, first move instructions into a function:
<input v-model="searchInput" @focus="isSearchInFocus = true" @blur="clickAway()" @keypress.enter="isSearchInFocus = false">
methods: {
clickAway () {
this.isSearchInFocus = false
}
}
This doesn't fix anything yet, but allows for a more complex instructions that follow.
The simplest workaround is to delay the execution of the clickAway instructions. In JavaScript there is a method setTimeout that creates a delay before execution:
setTimeout(() => {
// instructions go here
}, // delay value in milliseconds goes here)
The syntax is complex but what you need to do is to copy and paste it into your function and fill in the placeholders:
methods: {
clickAway () {
setTimeout(() => {
this.isSearchInFocus = false
}, 100)
}
}
Now when clickAway is called by event listener the method setTimeout is executed. It waits for 100 milliseconds and then executes this.isSearchInFocus = false. 100 milliseconds is enough for a click event listener in suggestions to react and execute its instruction. And if you just click away somewhere else the suggestions are dismissed with a barely noticable delay.
Hope this helps 😉
Edited