Autocomplete options misbehaving / duplicating when being used fast, repeatedly or with pasted content (cache related?)

Reproduction

https://formkit.link/c99d6d313aa88c350bff3f71b2a50a67

Describe the bug

I don’t really know how to describe the bug, so I just used the examples & try to explain with them. While below I use “Lord of the Rings: The Two Towers”, which would be rather an edge case that someone uses it like that, this also happens when you use 1 letter, quickly write e.x. “G” and then either copy / select / paste or delete / write, etc. This happens a lot. It is not hard evidence, but I asked a friend to try my form and he discovered this immediately.

1. Open Playground
2. Enter or Paste “Lord of the Rings: The Two Towers”
3. Select the entered text
4. Copy / Paste it again

=> Now you have multiple entries.

---

Why is this even more a problem?

When writing e.x. “G”, the func returns the results, when you delete “G” the result is still there (assume a cached version) when you click on the autocomplete. This + the above combined creates a pretty strange user experience. If you know have a method that depends on a value like so:

(usually you would use getCities: async ({ search, page, hasNextPage }), but you do not have access to the model value at that point)

getCities: async (input) => {
        const search = input.searchValue;
        if (search === "")
            return [];

        const take = 20;
        const gqlPage = input.page - 1;
        const whereClause = "startsWith" //todo: could also be contains
        const countryId = input.node.parent.value.countryId; //<--- watch here

        return Promise.resolve({data:{hasNextPage:true,items:[]}}/*logic to get data*/).then(e => {
            if (e.data.hasNextPage)
                hasNextPage();

            return e.data.items.map(e => {
                return {
                    value: e.id,
                    label: e.name
                }
            });
        })
    }

You have the issue that if you get the duplicate “options” entries, that they can have the same label but different value, as there is a cached version from before shown.

I hope it is somehow understandable. I am sorry for not being able to provide more details. I can’t debug the pro “autocomplete” code. Willing to show problem live.

Environment

• OS: Windows • Browser: Chrome • Version: 106.0.5249.119

[ThatDeveloper]

@sashamilenkovic Awesome. Just notify me when it is solved. Don’t need it today. 😃

[ThatDeveloper]

@sashamilenkovic It looks like it is working now. Closing the issue, thank you very much. 😃