darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.
https://darrenjennings.github.io/vue-autosuggest
MIT License
621 stars 91 forks source link

Tab to complete as a prop #208

Open usernamehw opened 3 years ago

usernamehw commented 3 years ago

Problem description:

It was already filed before: #94, #172. But what was proposed is more of a hack. It's not good enough, because it also prevents tabbing out of the input. The tab handler should only prevent default behavior when autocomplete is visible, not at all times.

It is possible to "hackaround" it harder:

<vue-autosuggest @keydown.tab="tabHandler" />
tabHandler(e: KeyboardEvent) {
    const { listeners, setCurrentIndex, setChangeItem, getItemByIndex } = this.$refs.autosuggest;
    const item = getItemByIndex(this.$refs.autosuggest.currentIndex);
    if (!item) {
        return;
    }
    e.preventDefault();
    setChangeItem(item, true);
    this.$refs.autosuggest.loading = true;
    listeners.selected(true);
}

But a simple api prop would be the best solution.

Suggested solution:

Create a boolean prop accept-on-tab that would work only when autocomplete suggestions are visible.

It's a common enough feature that I've seen in multiple typeahead libraries.

darrenjennings commented 3 years ago

@usernamehw I like it. Would you open to submitting a PR?

usernamehw commented 3 years ago

I think such things are better left to repository owner. It would take a lot more time for me to build it and make this feature.