OnChange handler is not working.

[kaifresh]

🐛 Bug report

Current Behavior

I have seen examples of onChange handlers attached to Formik <Field /> components, which appear to fire on input changes

In keeping with these examples, I have added an onChange handler to a <Field /> component. The problem is that this handler function is not being called when the child input changes (it is a <select>).

Expected behavior

When a new option on the <select> is chosen, the handler should fiire

Reproducible example

<Field name={id} onChange={(e: any)=>console.log(e)}>

Suggested solution(s)

Explain how to correctly supply an onChange handler to a Formik form.

Your environment

Software	Version(s)
Formik	"formik": "^1.5.1",
React	"react": "^16.4.2",
TypeScript
Browser	chrome 72.0.3626.121
npm/Yarn	yarn 1.13.0
Operating System	mac os 10.14

[jelling]

onChange is working for me when the onChange handler is in the scope of the Form object but not when in it is passed in as a property. However, handleSubmit is passed in as a property and it works.

const MyForm = props => {
  const { values, touched, errors, handleChange, handleBlur, handleSubmit } = props;

  const localOnChange = () => console.log('local onchange called'); // this works

  return (
    <form onSubmit={handleSubmit} > // handleSubmit is passed in via props and works
      <input type="text" onChange={localOnChange} onBlur={handleBlur} value={values.school} name="school" />
      <input type="text" onChange={handleChange} onBlur={handleBlur} value={values.degreeType} name="degreeType" />
      <button type="submit">Submit</button>
    </form>
  );
};

const FooWithFormik = props => {
  const validate = values => {
    const errors = {};

    if (!values.school) {
      errors.name = 'Required';
    }

    return errors;
  };

  return props.makeForm(validate, MyForm);
};

export default FooWithFormik;

[jelling]

#1817

[timurcatakli]

Can you try this?

    <Component
      onChange={event => field.onChange(field.name)(event)}
      minEditorHeight={100}
      maxEditorHeight={100}
    />

[Elmar101]

<Formik initialValues={{
title: data?.title ,
description: data?.description,
price: data?.price ,
image: data?.image
}}
validationSchema = {validationSchema}
onSubmit={handleSubmit}
>
{
({handleSubmit, errors , touched, handleChange , handleBlur, values, isSubmitting,setFieldValue}: FormikProps)=>{
return (
<>

Title
<Input
title="title"
type="text"
onChange={(e:React.ChangeEvent)=> setFieldValue("title",e.target.value)}
onBlur={handleBlur}
value={values.title}
disabled={isSubmitting}
isInvalid = {touched.title && !!errors.title}
/>
{touched.title && errors.title && {errors.title} }

                            <FormControl mt={4}>
                                <FormLabel> Description </FormLabel>
                                <Textarea
                                    title="description"
                                    name="description"
                                    value={values.description}
                                    onChange={(e)=>setFieldValue("description",e.target.value)}
                                    onBlur={handleBlur}
                                    disabled={isSubmitting}
                                />

[theboyofdream]

When dealing with dates setValues worked for me.

<DateTimePickerInput
                  label="End Date"
                  value={values.endDate}
                  minDate={values.startDate}
                  mode={'date'}
                  onChange={date => {
                    setValues({...values, endDate: date});
                    handleChange('endDate');
                  }}
                  style={{flex: 1}}
                  errorText={errors.endDate && `${format(errors.endDate as Date, 'dd/MM/yyyy')} Invalid`}
                />