How to reset this single-select Autocomplete component? about choc-autocomplete

[Kysluss]

Hi @atandy

That functionality is controlled by restoreOnBlurIfEmpty on the Autocomplete component which is true by default. If you set it to false, it will clear itself when you delete everything in the input element.

For the formik example, you bring up a good point. If I specify one as the initial value like the demo does and then use formik.resetForm() on a button click the display doesn't seem to change back to one. If you submit the form, the value is one, but what is displayed on the form itself doesn't reflect that.

[Kysluss]

Below is an example formik component I was able to get working. Does this do what you're expecting?

import {
  Box,
  Button,
  Center,
  FormControl,
  FormHelperText,
  FormLabel,
  Heading,
} from "@chakra-ui/react";
import * as React from "react";
import {
  AutoComplete,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
  AutoCompleteGroup,
} from "@choc-ui/chakra-autocomplete";
import { Formik } from "formik";

const options = [
  { label: "apple", value: "one" },
  { label: "appoint", value: "two" },
  { label: "zap", value: "three" },
  { label: "cap", value: "four" },
  { label: "japan", value: "five" },
];

function FormikExample() {
  const name = "team";
  const onSubmit = data => console.log("data from form", data);

  return (
    <Box border="1px" borderRadius="1em" p={2}>
      <Heading as="h6" align="center">
        Formik
      </Heading>
      <Formik onSubmit={onSubmit} initialValues={{ team: "one"}}>
        {({ handleSubmit, handleBlur, setFieldValue, ...other }) => (
          <>
            <Button onClick={() => setFieldValue("team", "four")}>
              Change Value To four
            </Button>

            <Button onClick={() => other.resetForm() }>Reset Form</Button>

            <form onSubmit={handleSubmit}>
              <FormControl>
                <FormLabel>Olympics Soccer Winner</FormLabel>
                <AutoComplete
                  onChange={val => setFieldValue("team", val)}
                  openOnFocus
                  restoreOnBlurIfEmpty={false}
                  value={other.values.team}
                >
                  <AutoCompleteInput
                    variant="filled"
                    name={name}
                    onBlur={handleBlur}
                  />
                  <AutoCompleteList>
                    <AutoCompleteGroup>
                      {options.map(option => (
                        <AutoCompleteItem
                          key={`option-${option.value}`}
                          value={{
                            title: `${option.value}`,
                          }}
                          label={option.label}
                          textTransform="capitalize"
                        />
                      ))}
                    </AutoCompleteGroup>
                  </AutoCompleteList>
                </AutoComplete>
                <FormHelperText>Who do you support.</FormHelperText>
              </FormControl>
              <Center>
                <Button type="submit">Submit</Button>
              </Center>
            </form>
          </>
        )}
      </Formik>
    </Box>
  );
}

export default FormikExample;

[arieb]

im actually trying to do a similar thing - im try to use this autocomplete as a way to select an option without actually using it as input, meaning after the user selects something i add his selection to a state, and then i want to reset the autocomplete element so the user can make another selection.
when i do

    const onSelect = (params: {
        item: Item;
        selectMethod: "mouse" | "keyboard" | null;
        isNewInput: boolean;
    }) => {
       // add selection to a state...
        autoCompleteRef.current?.resetItems();
        autoCompleteRef.current?.removeItem(params.item);
    };

nothing happens, and the user input stays selected..

[Kysluss]

Hi @arieb . I see what you mean. I was able to write up a quick demo on my end and will work on this.

[Kysluss]

To try and give some more detail to what the issue is, in a non-controlled state the resetItems and removeItem methods on the passed to the AutoComplete component don't seem to properly reset the input element's value. If you are using a controlled component (passing a value prop to AutoComplete), this behavior works as expected without needing the resetItems and removeItem methods.

Hopefully a simple boiled down version:

• While passing value prop, resetting the value to an empty string after selecting something will correctly show nothing in the input
• Without passing value prop, resetting the component using resetItems and removeItem will incorrectly show the last selected value in the input

[Kysluss]

A very simple repro of this

function App() {
  const autoCompleteRef = React.useRef<AutoCompleteRefMethods>();

  const onChange = React.useCallback((value: any) => {
    // Do something else with value, then reset 
    if(value) {
      autoCompleteRef.current?.resetItems();
      autoCompleteRef.current?.removeItem(value);
    }
  }, []);

  return (
    <AutoComplete ref={autoCompleteRef} onChange={onChange} openOnFocus>
      <AutoCompleteInput variant="filled" w="48" />
      <AutoCompleteList>
        {options.map(option => (
          <AutoCompleteItem
            key={`option-${option.value}`}
            value={{ title: `${option.value}` }}
            label={option.label}
          />
        ))}
      </AutoCompleteList>
    </AutoComplete>
  );
}

[Kysluss]

This should be resolved in v5.3.1. If you continue to have any problems, let me know and I'll re-open this issue or start a new one.