Reset items after submission

[JedBh]

Recently I worked with NextJS, Autocomplete, Chakra UI and Formik. Everything works perfectly, but after submission the items don't reset. So, let's say it's a country input and I chose the USA, after I submit I click again on the country input and the only option is the USA. Of course, you can start typing again and it will be normal. I found a solution, I added a key to the Autocomplete and after each submission the key changes hence resetting the Autocomplete - this is not an efficient solution.

So if there is a fix for this please let me know!

[Kysluss]

Hi @JedBh,

Would you be able to post an example to reproduce the issue (either codesandbox, or just an example component)? I'm going to be out of town for a few days, but I'd like to take a look at this when I get back. I'm using Chakra, Autocomplete, and Formik in a couple of my projects and don't think I've run into this yet, but I wasn't looking for it either so it may have been overlooked.

[JedBh]

Hi @Kysluss,

First thank you for returning to me, I also had some time out of town, sorry for the delay.

Look at this first image, here I search for Germany.

Now I select it, then I submit it.

After submission and reset, Germany is the only option to choose from. Of course you can start typing and it will give you other countries but it's a little annoying.

If you want you can also view this in this repo.

[Kysluss]

Hi @JedBh

Sorry for the delay on this. I took a look at the screenshots and the repo. It looks pretty similar to what I've done with other formik projects I've used so I'm going to mark this as a bug. I should be able to work on it in a day or so. I'm really sorry for the delay, but thank you for reporting it.

[Kysluss]

Hi @JedBh ,

I have a potential workaround for the issue you're seeing. If you pass a ref to the AutoComplete component, you can remove the selected item in your handleSubmit function. Below is some stubbed out code I used in testing.

I'm working on a more sustainable solution in my test environment, but I want to do more testing to make sure I'm not inadvertently breaking something else.

const autoCompleteRef = useRef();

const handleSubmit = useCallback(() => {
    setSubmitting(true);
    setTimeout(() => {
        alert(JSON.stringify({country}, null, 2));
        autoCompleteRef.current.removeItem(country);
        setCountry('');
        setSubmitting(false);
    }, 1000);
}, [country, setSubmitting]);

For your autocomplete component, make sure to pass the ref to it

<AutoComplete
    value={country}
    ref={autoCompleteRef}
       ..........
>

[Kysluss]

I had some time to finish my testing tonight. This should be fixed in v5.2.8. Thank you for the bug report!