This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
use with formik #23
Comments
I wouldn't think this component would work as a drop in replacement for Chakra's built in 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. |
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 |
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>
)
}; |
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. |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
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.
But I get this error with the new select.
The text was updated successfully, but these errors were encountered: