Блог

У меня есть форма Formik, которая содержит несколько компонентов текстового поля пользовательского интерфейса Material. Все они работают нормально, за исключением одного, который теряет фокус при выполнении onChange (). Он имеет компонент PhoneInput (ввод номера телефона) в качестве пользовательского ввода. Все работает нормально (данные сохраняются и т.д.), Но я должен продолжать нажимать на ввод, чтобы продолжить запись на нем.

У меня такое чувство, что это как-то связано с рефери. При входе в inputRef (PhoneInputRef, предоставленный текстовым полем) это не похоже на обычную ссылку.

Компонент Formik (Родительский)

 {...}
<Formik
  initialValues={initialValues}
  validationSchema={validationSchema}
  onSubmit={handleClickRegister}>
  {(props) => <RegisterForm {...props} />}
</Formik>
{...}
 

Форма (Дети)

 {...}

const {
    values: {
        firstName,
        lastName,
        email,
        confirmEmail,
        password,
        confirmPassword,
        phoneNumber,
    },
//Formik methods passed as props
    errors,
    touched,
    handleChange,
    handleSubmit,
    setFieldValue,
    setFieldTouched,
} = props;

{...}

//Formik onChange handler (used by every TextField besides the one containing PhoneInput)
const change = (name, e) => {
  e.persist();
  handleChange(e);
  setFieldTouched(name, true, false);
};

//Custom onChange handler for Formik (used by PhoneInput)
const handleOnChange = (name, value) => {
  setFieldValue(name, value);
  setFieldTouched(name, true, false);
};

{...}

{/*NORMAL TEXTFIELD*/}

<TextField
  className={classes.inputField}
  id="confirmPassword"
  name="confirmPassword"
  label={t("header.registerDialog.form.labelConfirmPassword")}
  value={confirmPassword}
  onChange={change.bind(null, "confirmPassword")}
  error={touched.confirmPassword amp;amp; Boolean(errors.confirmPassword)}
  helperText={
    touched.confirmPassword amp;amp; errors.confirmPassword ? (
      errors.confirmPassword
    ) : (
      <>
        amp;nbsp;
        <br />
      </>
    )
  }
/>

{/*CUSTOM INPUT TEXTFIELD*/}

<TextField
  className={classes.textFieldPhoneInput}
  key="textFieldPhone"
  ref={textFieldRef}
  id="phoneNumber"
  name="phoneNumber"
  label={t("header.registerDialog.form.labelPhone")}
  InputLabelProps={{
    className: phoneNumber
      ? classes.inputFieldPhoneLabel
      : classes.inputFieldPhoneLabelEmpty,
  }}
    InputProps={{
      inputComponent: ({ inputRef, ...rest }) => (
        <PhoneInput
          {...rest}
          key="phoneInput"
          ref={inputRef}
          international
          countryCallingCodeEditable={false}
          name="phoneNumber"
          defaultCountry="AR"
          onChange={(phone) =>
            handleOnChange("phoneNumber", phone)
          }
          labels={phoneLanguage}
          value={phoneNumber}
        />
      ),
    }}
    error={touched.phoneNumber amp;amp; Boolean(errors.phoneNumber)}
    helperText={
      touched.phoneNumber amp;amp; errors.phoneNumber ? (
        errors.phoneNumber
      ) : (
        <>
          amp;nbsp;
          <br />
        </>
      )
    }
/>

{...}