Update method firing when input field blurs

[pespantelis]

Update method firing when input field blurs

[cgs]

@bencarter78 Scratched my head on this one for some time. Here's what worked:

export default {
  extends: VueTypeahead,
  data () {
    return {
      src: '/guided_search/keyword_search',
      limit: 5,
      minChars: 3,
      showItems: true // for some reason, directly manipulating the items array is buggy; i.e. items = [] is not reliable
    }
  },
  methods: {
    doUpdate(event) {
      this.showItems = true
      this.update()
    },
    onHit(item) {
      this.query = item
      $("input[name='disease']").val(this.query) // firefox needs this ¯\_(ツ)_/¯
      this.softReset()
    },
    softReset() {
      this.loading = false
      this.showItems = false
    }
  }
}

and in the template:

<input type="text"
   name="disease"
    :class="{'Typeahead__input': true}"
    placeholder="Example: Leukemia"
    autocomplete="off"
    v-model="query"
    v-validate="'required'"           
    @keydown.down="down"
    @keydown.up="up"
    @keydown.enter="hit"
    @keydown.esc="reset"
    @blur="softReset"
    @input="doUpdate"/>

<ul v-show="hasItems && showItems">
...
</ul>

In my case I wanted the query to stay in the input on blur, even if no results matched. Clearing out the items via items = [] was giving me mixed results. I would type 3 characters (the default to trigger the data to load) and according to the Chrome vue inspector, I could see the items var get populated with a few results. In softReset() I was calling items = []. Logging that in the console, items was empty. However, in the vue inspector it was still populated and the dropdown with options was still appearing. Not sure what's going on there; something with data and extends maybe? I ended up adding showItems to data as a workaround.

It would be nice to have a "selecting item populates the input box" as a core feature as this is a pretty common use case. Would be happy to submit a pull req, but my solution above is a bit hacky and I'm stumped why manipulating the items array isn't working.

I should also mention that this does not fix the update event from firing on blur - this could be the expected Vue behavior, but I'm not certain.