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>
    )
};

[jimages]

onChange expects returning void, whereas setFiedldValue returns a Promise. It will break the type check.

[VitalyVaryvdin]

Doesn't really work in my case

import { FieldProps } from 'formik'
import { Select } from "chakra-react-select"

interface Option {
    value: string
    label: string;
}

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

    return (
        <Select
            onChange={ (option: Option) => setFieldValue(field.name, option.value) }
        />
    )
};

results in Type '(option: Option) => void' is not assignable to type '(newValue: SingleValue<Option>, actionMeta: ActionMeta<Option>) => void'. Types of parameters 'option' and 'newValue' are incompatible. Type 'SingleValue<Option>' is not assignable to type 'Option'. Type 'null' is not assignable to type 'Option'.ts(2322)

I've got my own version of the component, which still doesn't work, unfortunately

import { useField, FieldProps } from "formik"
import { Select as ChakraSelect, InputProps } from "chakra-react-select"

type Props = InputProps & FieldProps

export const Select = ({ options, name, form: { setFieldValue } }: Props) =>{
    const [ field ] = useField(name as string)

    return (
        <ChakraSelect
            name={field.name}
            placeholder=""
            useBasicStyles
            options={options}
            value={options ? options.find((option: any) => option.value == field.value) : ""}
            onChange={(option: any) => setFieldValue(field.name, option.value)}
        />
    )
}

used like

<Select name="role.id" options={getRoles() as Option[]} />

results in Type '{ name: string; options: Option[]; }' is missing the following properties from type 'InputSpecificProps<unknown, boolean, GroupBase<unknown>>': isHidden, clearValue, cx, getStyles, and 8 more.ts(2740)

Still very new to TypeScript and React. Any help is appreciated

[VitalyVaryvdin]

For any newcomers, this is final form of a working component I ended up. Had to wait before posting I guess

import { useField } from "formik"
import { Select as ChakraSelect } from "chakra-react-select"

export interface Option {
    label: string
    value: string
}

type Props = {
    name: string
    options: Option[]
}

export const Select = (props: Props) =>{
    const [ field, meta, helpers ] = useField(props.name)
    const { setValue } = helpers

    return (
        <ChakraSelect
            name={field.name}
            placeholder=''
            useBasicStyles
            options={props.options}
            value={props.options ? props.options.find((option: any) => option.value == field.value) : ""}
            onChange={(option: any) => setValue(option.value)}
        />
    )
}

[THE-SIMPLE-MARK]

@VitalyVaryvdin How would this work with no Formik context? I can't use useField as I use useFormik which doesn't create React contexts which useField needs internally. I would need an alternative to this with useFormik in mind.

[THE-SIMPLE-MARK]

@VitalyVaryvdin How would this work with no Formik context? I can't use useField as I use useFormik which doesn't create React contexts which useField needs internally. I would need an alternative to this with useFormik in mind.

Solved with only supplying the onChange and the id for the select component and Formik uses it without any problems.
I used the following onChange function:
onChange={(option) => formik.setFieldValue("creationId", option.value)}