PhoneInput default value

[Rekk1d]

Hi! I have a form for changing the user's phone number in my personal account. Logically, the default Value (the user's current phone number) should be displayed in the phone number field. But if you do this, the react hook form will return an error stating that the field is empty (although everything is fine with the default Value, it exists). If you replace value={value} in the code, then value is undefined for some reason, and accordingly react hook form returns an error.

Here is a sample code and a demo.

Example 1:

PhoneInput component:

<PhoneInput
      onChange={onChange}
      value={value}
      countries={['RU', 'BY']}
      defaultCountry="RU"
      international
      addInternationalOption={false}
      className={styles.phone}
      countryCallingCodeEditable={false}
      focusInputOnCountrySelection={false}
      limitMaxLength
      {...rest}
    />

Form:

   <Controller
        name="phone"
        control={control}
        rules={{ required: true }}
        render={({ field: { onChange, value, name } }) => (
          <PhoneInput
            label="Телефон"
            value={value}
            onChange={onChange}
            id="phone"
            name={name}
            hasError={errors.phone !== undefined}
            help={errors.phone ? errorMessages[errors.phone.type] : undefined}
          />
        )}
      />

  Result: https://skrinshoter.ru/vNwq2DfPTBK
  logical behavior (because value is empty)

  Example 2: 

  PhoneInput component: 

<PhoneInput
      onChange={onChange}
      value={value}
      countries={['RU', 'BY']}
      defaultCountry="RU"
      international
      addInternationalOption={false}
      className={styles.phone}
      countryCallingCodeEditable={false}
      focusInputOnCountrySelection={false}
      limitMaxLength
      {...rest}
    />

Form:

   <Controller
        name="phone"
        control={control}
        rules={{ required: true }}
        render={({ field: { onChange, value, name } }) => (
          <PhoneInput
            label="Телефон"
            value={defaultValue}
            onChange={onChange}
            id="phone"
            name={name}
            hasError={errors.phone !== undefined}
            help={errors.phone ? errorMessages[errors.phone.type] : undefined}
          />
        )}
      />

  Result: https://skrinshoter.ru/vNwxkQLfJj0

  How do I add the `defaultValue` to the phone number field?

[catamphetamine]

Hi. I don't use react-hook-form so I dunno. I won't be looking into this issue (if there is any). Perhaps it's an issue in how you're using the library because no one has reported anything like that.

[omeralpi]

@Rekk1d Maybe this could be of use to you.

Wrapped with react-phone-number-input; you can try Shadcn Phone Input.