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
Any example for autocomplete with formik #18331
Comments
@sessionboy What do you think of moving this concern to https://github.com/stackworx/formik-material-ui? It likely requires the same handling than https://github.com/stackworx/formik-material-ui/blob/29848beb73bc4aa53c01e227376e835f58f036bc/src/Select.tsx#L29. |
@oliviertassinari Thank you for your answer. I have tried it. const onChange = React.useCallback(
(event: React.ChangeEvent<{ value: unknown }>) => {
// Special case for multiple and native
if (props.multiple && props.native) {
const { options } = event.target as HTMLSelectElement;
const value: string[] = [];
for (let i = 0, l = options.length; i < l; i += 1) {
if (options[i].selected) {
value.push(options[i].value);
}
}
setFieldValue(field.name, value);
} else {
field.onChange(event);
}
},
[field.name, props.multiple, props.native]
); But the select component is not multiple or native, so it run to I noticed the second parameter of the onChange method, it is currently option of selected, so I did the following: const onChange = React.useCallback((event,item) => {
setFieldValue(field.name, item.value);
},
[field.name]
); Awesome, ow it works. But I have another problem from getOptionLabel = (value)=>value This is not what I expected.I expect it to be label instead of value. const onChange = React.useCallback((event,item) => {
setFieldValue(field.name, item);
},
[field.name]
); getOptionLabel = (option)=>option.label Awesome, it works. {
value:"fans",
label:" my fans "
} I want to get the value instead of an object. |
@sessionboy Thank you for sharing your experience and your frustration. From what I understand you have found the solution. Regarding your issue with the value, if you want to use a different interface with Formik, you have to adapt it in the both ends of the spectrum (the value and the change event). I'm moving the concern to #15585 as a global effort. For your very issue, head to https://github.com/stackworx/formik-material-ui. |
In case someone is looking for a full working solution import React from 'react';
import { Autocomplete } from '@material-ui/lab';
import { TextField } from '@material-ui/core';
import { fieldToTextField } from 'formik-material-ui';
const FormikAutocomplete = ({ textFieldProps, ...props }) => {
const { form: { setTouched, setFieldValue } } = props;
const { error, helperText, ...field } = fieldToTextField(props);
const { name } = field;
return (
<Autocomplete
{...props}
{...field}
onChange={ (_, value) => setFieldValue(name, value) }
onBlur={ () => setTouched({ [name]: true }) }
renderInput={ props => (
<TextField {...props} {...textFieldProps} helperText={helperText} error={error} />
)}
/>
);
}
export default FormikAutocomplete; |
Hi @keyvanm thanks for sharing your FormikAutocomplete component. Is there any chance that you could also share what you pass in as 'textFieldProps' and 'props' to the component? I am getting a "Cannot read property 'setTouched' of undefined" error. Thanks. |
The way you want to use this component is to use it in conjunction with a formik import { Field } from 'formik';
<Field name='owner' component={FormikAutocomplete} label="Owner"
options={users}
textFieldProps={{ fullWidth: true, margin: 'normal', variant: 'outlined' }}
/> Formik Field will inject the rest of the props including
|
Thank you so much @keyvanm Update: and seems to be with the Did you come across this? Just wondering if I am doing something obviously wrong? Thank you again for your help. Update 2 |
Yea I couldn't get this working as presented above. I keep getting the error:
|
I had a couple issues with @keyvanm's solution
Here is my modified version: import { TextField, TextFieldProps } from "@material-ui/core";
import { Autocomplete, AutocompleteInputChangeReason, AutocompleteProps } from "@material-ui/lab";
import { FieldProps } from "formik";
import { fieldToTextField } from "formik-material-ui";
import React from "react";
const AnyAutocomplete = Autocomplete as any;
export interface FormikAutocompleteProps<V extends any = any, FormValues extends any = any>
extends FieldProps<V, FormValues>,
AutocompleteProps<V> {
textFieldProps: TextFieldProps;
}
const noOp = () => {};
const FormikAutocomplete = <V extends any = any, FormValues extends any = any>({
textFieldProps,
...props
}: FormikAutocompleteProps<V, FormValues>) => {
const {
form: { setTouched, setFieldValue, touched },
} = props;
const { error, helperText, ...field } = fieldToTextField(props as any);
const { name } = field;
const onInputChangeDefault = props.onInputChange ?? noOp;
const onInputChange = !props.freeSolo
? props.onInputChange
: (event: React.ChangeEvent<{}>, value: string, reason: AutocompleteInputChangeReason) => {
setFieldValue(name!, value);
onInputChangeDefault(event, value, reason);
};
return (
<AnyAutocomplete
{...props}
{...field}
onChange={(_, value) => setFieldValue(name!, value)}
onInputChange={onInputChange}
onBlur={() => setTouched({ ...touched, [name!]: true })}
renderInput={(props) => <TextField {...props} {...textFieldProps} helperText={helperText} error={error} />}
/>
);
};
export default FormikAutocomplete; |
Hello! I feel like I'm really close! As per @keyvanm, I'm trying:
But I'm getting error: |
You need to pass getOptionLabel to resolve label. Here is the example
|
In that case you should use setFieldTouched API |
Let's move the discussion to stackworx/formik-mui#126 |
Hi guy!
I need example for autocomplete with formik.
I tried the following efforts but encountered some problems.
This is my form:
The
Select
component base on autocomplete:I get a weird result when I select an option and click the submit button.
I get a wrong form value, uType is not updated when I select an option. And
mui-autocomplete-27892-option-1: 0
this value does not know where to come fromThe text was updated successfully, but these errors were encountered: