Vue.js input suggestions visible when input is focused and @click

Question

I a having a small issue with my app. I display search suggestion only when the input is focused using v-show and @focus like this

//input
@focus="shouldShowSuggestions = true"
@blur="shouldShowSuggestions = false"

//suggestions div
v-show="shouldShowSuggestions"

When I focus on the input the suggestions are shown correctly but when I try to click on a suggestion the link is not clicked and suggestions disappear due to the @blur I have.

I know the issue but I am not sure how to handle it. Any ideas?

I created a pen with the problem in case it is not clear. To reproduce just, focus on the input and try to click on a suggestion.

Codepen: https://codepen.io/anon/pen/vrdavv

Answer 1

A click event consists of a mouse down and up action. The input will be blurred on mouse down, therefore it will be hidden before the click event would occur.

Try using the mousedown event instead of click to catch it earlier (but this probably won't work on touch devices).

Or, even better, you could prevent the mousedown event from blurring the focused element:

<a @mousedown.prevent @click="clickedElement">