use with formik

[IhsenBouallegue]

Is your feature request related to a problem? Please describe.
I tried to use this with Formik. But I couldn't get it to work as a drop in replacement fromthe normal chakra ui select.

Describe the solution you'd like
If this is already implemented, I would love an example. If not, what's the point of a Select without it being useful for forms.

Describe alternatives you've considered
I searched how people do that with react select, but I couldn't do it.

Here is my code, it works with the normal Chakra UI Select.

<Field name="subject" validate={validateSubject}>
  {({ field, form }: FieldProps) => (
    <FormControl
      isInvalid={!!form.errors.subject && !!form.touched.subject}
      isRequired
    >
      <FormLabel mt="4">Subject</FormLabel>
      <Select
        {...field}
        id="subject"
        placeholder="Select subject.."
        options={options}
        rounded="4"
      />
      <FormErrorMessage>{form.errors.subject}</FormErrorMessage>
    </FormControl>
  )}
</Field>

But I get this error with the new select.

Unhandled Runtime Error

TypeError: target is undefined
Call Stack
useFormik/executeChange<
node_modules\formik\dist\formik.esm.js (721:0)
useFormik/handleChange<
node_modules\formik\dist\formik.esm.js (755:0)
useEventCallback/<
node_modules\formik\dist\formik.esm.js (1256:0)

[csandman]

I wouldn't think this component would work as a drop in replacement for Chakra's built in Select component as they handle state differently, but it should still work fine with some small changes.

Any chance you could provide a minimally reproduced example using one of the templates I offer in the Readme? If you do, I can make the changes needed for it to work properly.

[csandman]

I had some free time so I made an example of using this component with Formik. I personally use react-hook-form, so I don't remember how Formik works that well but I made it work based on this example I found.

Here it is, let me know if it helps: https://codesandbox.io/s/chakra-react-select-single-select-with-formik-pwz2s?file=/example.js

[baileydoestech]

Here is a working Typescript example we use (getting some data for the dropdown via an async API call):

import { FormControl, FormLabel, FormHelperText, Box } from '@chakra-ui/react';
import { FieldProps } from 'formik';
import { Select } from "chakra-react-select";
import { AccountList, AccountOut } from '@/types';
import { getData} from '@/api';

interface Option{
    value: string
    label: string;
}

type OptionList= Array<Option>;

export const AsyncSelect = ({
    field,
    form: { setFieldValue },
    ...props
}: FieldProps) => {

    const { data, isLoading, error } = getData();

    const defaultValue = (options: OptionList, value: string) => {
        return options ? options.find(option => option.value === value) : ""
    }

    return (
        <FormControl>
            <FormLabel>Some label</FormLabel>
            <FormHelperText>Start typing</FormHelperText>
            {isLoading ? (
                <div>Loading</div>
            ) : error ? (
                <div>Error</div>
            ) : data ? (
                <Box>
                    <Select
                        defaultValue={defaultValue(data, field.value)}
                        placeholder="Select an value..."
                        options={data}
                        onChange={
                            (option: Option) => setFieldValue(field.name, option.value)
                        }
                    />
                </Box>
            ) : null}
        </FormControl>
    )
};

[csandman]

I'm closing this for now because solutions have been provided. I'm planning to add information on incorporating this component with form providers soon as well.