typescript - How can I set auto-complete in a Formik Form built with a react-select component (TS)? - Stack Overflow

admin管理员组

文章数量:1392116

I'm currently using a Formik Form in which my Field is built with a Select component from react-select. I've got something like this:

<Formik     initialValues=[...]}
            onSubmit={onSubmit}
            validationSchema={[...]}>
    <Form>
                <Field
                        name="country"
                        component={FormikSelect<SomeType>}
                        label={t("subscription.form.country")}
                        options={getCountriesOptions()}
                        autoComplete="country-name"
                        onChange={(value: CustomOption<string>) => {
                            // Update Global formData
                            setFormData((prev) => ({ ...prev, country: value }));
                            // Update Formik Form
                            setFieldValue("country", value);
                        }}
                        isSearchable
                        isRequired
                    />
[...]
    </Form>
</ Formik>

Where FormikSelect is:

const FormikSelect = <V extends FormikValues, T = string>({
    label,
    options,
    field: { name, onBlur, value },
    form: { setFieldValue, setFieldTouched },
    autoComplete,
    isRequired,
    ...props
}: FormikSelectProps<T> & FieldProps<CustomOption<T>, V>) => {
    const onChange = (option: CustomOption<T>) => {
        setFieldTouched(name, true);
        setFieldValue(name, option);
    };

    return (
        <div className="field-container">
            <label htmlFor={name}>{label}</label>
            {isRequired && <sup>*</sup>}
            <Select
                value={value}
                options={options}
                onBlur={onBlur}
                onChange={onChange}
                inputProps={{ autoComplete }}
                {...props}
            />
            <ErrorMessage name={name}>
                {(errorMsg: unknown) => <FormikError error={errorMsg} />}
            </ErrorMessage>
        </div>
    );
};

And my tab of countrys look like this:

export interface Country {
  label: string;
  value: string;
}

which for exemple will give:

{
  value: "Andorra",
  label: "Andorra"
}

As explained in the title I'm trying to have an auto-completion on this field which currently isn't recognize by my web autocompletion when first name or last name are.

I tried:

• to create a new Input component in Select where I give my autoComplete prop
• autoCompletion="country"
• autoCompletion="country-name"
• An input with autoCompletion="country-name": worked fine but only on this field form wasn't completed
• Add isSearchable

本文标签：