import { Autocomplete, Option } from 'chakra-ui-simple-autocomplete';

const options = [
  { value: 'javascript', label: 'Javascript' },
  { value: 'chakra', label: 'Chakra' },
  { value: 'react', label: 'React' },
  { value: 'css', label: 'CSS' },
];

const AutocompleteWrapper = () => {
  const [result, setResult] = React.useState<Option[]>([]);

  return (
      <Box maxW="md">
        <Autocomplete
          options={options}
          result={result}
          setResult={(options: Option[]) => setResult(options)}
          placeholder="Autocomplete"
        />
      </Box>
  );
};

import { Autocomplete, Option } from 'chakra-ui-simple-autocomplete';
import { Badge, Box } from '@chakra-ui/react';

const options = [
  { value: 'javascript', label: 'Javascript' },
  { value: 'chakra', label: 'Chakra' },
  { value: 'react', label: 'React' },
  { value: 'css', label: 'CSS' },
];

const autocompleteSchema = Yup.object().shape({
  tags: Yup.array()
    .of(
      Yup.object().shape({
        value: Yup.string(),
        label: Yup.string(),
      }),
    )
    .min(1),
});

const AutocompleteWrapper = () => {
  const [result, setResult] = React.useState<Option[]>([]);

  return (
    <Formik
      validationSchema={autocompleteSchema}
      initialValues={{ tags: [] }}
      onSubmit={(values) => {
        console.log(values)
      }}>
      {(props) => (
        <Box maxW="md">
          <Field name="tags">
            {({ field, form }: FieldProps) => (
              <Autocomplete
                options={options}
                result={result}
                setResult={(options: Option[]) => {
                  form.setFieldValue('tags', options);
                  setResult(options);
                }}
                placeholder="Autocomplete"
              />
            )}
          </Field>
        </Box>
      )}
    </Formik>
  );
};