[Question] Hide suggestion list on blur

• vue-autosuggest version: 1.8.3
• node version: 10.15.3
• yarn version: 1.15.2

Relevant code or config

https://jsfiddle.net/bthqsfyz/2/

Problem description: First thank you for this component. I am not a javascript nor a Vue expert but I did my best to search the repo before filing this issue. I want to hide the suggest list when blur event is fired on the input. For example as shown in the fiddle I have three inputs, user uses tab key to navigate, autosuggest input gets focus and list is shown, user wants to move on to the next field and presses tab key but the autosuggest list is still shown. I know that pressing the esc key will close the list but I don’t want to force the user to have to press the esc when they’re done with the field. I went through the documentation and searched the whole repo but could not find a method to close the suggestion list myself.

Suggested solution: I still think I am missing something and there should be a method to close the list. for example I can use blur event and when it is fired I call the hide/close method.

[darrenjennings]

@ifdotpy yea good catch. If you detect what is being clicked before you close then you can get around it:

https://jsfiddle.net/darrenjennings/ajv19e0s/66/

e.g.

      onBlur (e) {
        // relatedTarget is null when you click a suggestion
      	if(e.relatedTarget && e.relatedTarget.tagName === 'INPUT') {
      		this.closed = true          
        }
      },

[darrenjennings]

@brandonkelly this should be possible just as well by resetting the suggestions to empty. Here’s an example with 1.8.1 (the version craftcms is currently using).

codesandbox.io/s/18x-close-on-blur-ldyeu

In case that link eventually expires… The gist of the fix is to reset the suggestions on focus and clear them on blur:

<vue-autosuggest
      :suggestions="autoSuggestions"
      :input-props="{onInputChange, autocomplete: 'off', id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}"
      @selected="selectHandler"
      @blur="onBlur"
      @focus="suggestionData = db.getCharacters()"
    >
      <template slot-scope="{suggestion}">
        <span class="my-suggestion-item">{{suggestion.item}}</span>
      </template>
    </vue-autosuggest>

import { VueAutosuggest } from "vue-autosuggest";
const db = {
  getCharacters: () => [
    "Frodo",
    "Samwise",
    "Gandalf",
    "Galadriel",
    "Faramir",
    "Éowyn"
  ]
};
export default {
  name: "HelloWorld",

  components: {
    VueAutosuggest
  },
  data: function() {
    return {
      db,
      query: "",
      selected: null,
      suggestionData: []
    };
  },
  computed: {
    autoSuggestions() {
      return [
        { data: this.suggestionData.filter(s => s.indexOf(this.query) > -1) }
      ];
    }
  },
  methods: {
    onBlur(e) {
      if (e.relatedTarget && e.relatedTarget.tagName === "INPUT") {
        this.suggestionData = [];
      }
    },
    onInputChange(e) {
      this.query = e;
    },
    selectHandler(e) {
      this.selected = e;
    }
  }
};