Formik onBlur triggers all select component errors

Viewed 321

I made a custom component for react-select component and when I trigger blur event, every react-select component got an error message.

this is the component code:

import { FieldProps, useField } from "formik";
import Select, { OptionsType } from "react-select";

interface Option
{
    label: string;
    value: string;
}

interface CustomSelectProps extends FieldProps
{
    options: OptionsType<Option>;
}

export const MyMultiSelect = ( {
    field,
    form,
    options,
}: CustomSelectProps ) =>
{
    const fieldMeta = form.getFieldMeta( field.value );

    return (
        <>
            <Select
                name={ field.name }
                value={ getValue() }
                onChange={ onChange }
                options={ options }
                onBlur={ field.onBlur }
            />
            <div className="field__validation">{ fieldMeta.touched && fieldMeta.error ? form.errors[ field.name ] : '' }</div>
        </>
    );
};

export default MyMultiSelect

I tried with handleBlur on but the problem is the same, I even tried creating a custom blur function but that wasn't helpful either

0 Answers
Related