formkit: 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.

image


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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 35 (18 by maintainers)

Most upvoted comments

@kswzr @enzobrigati I’m actually going to reopen this for now as I’ve found a regression myself. I’ll be working on this today.

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