Невозможно сфокусироваться на первой ошибке ввода в Formik - PullRequest
Новая
       5

Невозможно сфокусироваться на первой ошибке ввода в Formik

0 голосов
/ 15 апреля 2020

У меня есть следующая реализация компонента formik, который отображает форму, я пытаюсь получить доступ к первому полю ошибки, чтобы сосредоточиться на нем, но безрезультатно, я покажу код 

const CompanyProfile = () => {
  const CompanySchema = Yup.object().shape({
    name: Yup.string()
      .min(2, 'too short')
      .required(ERROR_REQUIRED),
    industry: Yup.string().notRequired(),
    address: Yup.string().notRequired(),
    crn: Yup.number().required(ERROR_REQUIRED),
    website: Yup.string()
      .notRequired()
      .min(2, 'too short'),
    employeesNbr: Yup.string().required(ERROR_REQUIRED),
    phoneNumber: Yup.string().required(ERROR_REQUIRED),

    userRole: Yup.string().required(ERROR_REQUIRED),
    personCheck: Yup.boolean().required(ERROR_REQUIRED),
  });

  const registerCompany = async values => {
    try {
      const data = values;
      delete data.personCheck;
      await addCompany(data);
    } catch (error) {
      console.log(error);
    }
  };

  const successSubmit = values => {
    registerCompany(values);
  };

  const forSubmit = formik => {
    console.log('not valid');
    const { errors } = formik;
    const keys = Object.keys(errors);
    console.log(formik);

    if (keys.length > 0) {
      const selector = `[id="${keys[0]}"]`;
      const errorElement = document.getElementsByName(selector);
      errorElement.focus();
    }
  };

  const formik = useFormik({
    initialTouched: false,
    validateOnChange: true,
    validateOnBlur: true,
    initialValues: {
      name: '',
      industry: '',
      address: '',
      crn: '',
      website: '',
      employeesNbr: '',
      phoneNumber: '',
      userRole: '',
      personCheck: false,
    },

    validationSchema: CompanySchema,
    onSubmit: values => {
      successSubmit(values);
    },
    handleSubmit: formik => {
      forSubmit(formik);
    },
  });

  return (
    <Skeleton pageTitle={PAGE_TITLE_COMPANY_PROFILE}>
      <CompanyProfileForm formik={formik} />
    </Skeleton>
  );
};
export default connect(CompanyProfile);

Я не знаю, где я иду не так, я правильно вписал имя, значение, onchange в поля ввода, потому что я могу извлечь значения Спасибо

...