Kevin Powell - Community•8mo ago

Vue / JavaScript in general: prevent blur / focusout if you clicked something special

So I'm doing an autocomplete search. Which goes by a input type=text and an absolute positioned div which shows the suggestions below it. The search string there is highlighted and looks for several parts (name of a person you search for or his company). The suggestions are parted: They highlight the name and the company. And if you click on either the name or the company the search string will be filled up with it. Or on pressing "enter" the search submits your current term.
And I'm not having fun on "@blur / @focusout" with this. I want to hide the "suggestions div" if you click outside of the input text (basically cancel it) but NOT if you click on a suggestion. And the suggestions themself are layered - like : <div class="name" ... <div class="company" ... so checking the blur event's target- if it is something you can actually click is kinda exhausting. Unfortunately the blur event hits before the click event on a name / company. So you can't say "@click="getThatClick" - but the click-event isn't triggered as blur came first. Adding @click.stop or so didn't help. Any thoughts on this? 😕

1 Reply

bibamannOP•8mo ago

Update: I made it somehow work with:

<input type="text"
  v-model="search" 
  @click="showResults = true"
  @keyup="emitSearch"
  @blur="onBlur"
/>

<div v-for="speaker in speakers">
  <div v-html="formatHighlighted(speaker.name)" @click="onClickSpeaker(speaker)" />
</div>

<input type="text"
  v-model="search" 
  @click="showResults = true"
  @keyup="emitSearch"
  @blur="onBlur"
/>

<div v-for="speaker in speakers">
  <div v-html="formatHighlighted(speaker.name)" @click="onClickSpeaker(speaker)" />
</div>

onBlur() {
      setTimeout(() => {
        this.showResults = false;
      }, 200)
}

onBlur() {
      setTimeout(() => {
        this.showResults = false;
      }, 200)
}

But it feels dirty. And I can't use "$nextTick" or "requestAnimationFrame" - even using 2 ($nextTick(() => $nextTick(() => ... ))). And a timeout of just 100ms isn't enough -> the click event doesn't trigger. And maybe on slower machines 200ms isn't enough either. So any better solutions?

Gaming

Programming

Vue / JavaScript in general: prevent blur / focusout if you clicked something special