darrenjennings / vue-autosuggest

🔍 Vue autosuggest component.

Home Page:https://darrenjennings.github.io/vue-autosuggest

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tab to complete as a prop

usernamehw opened this issue · comments

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.

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

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.