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