Cannot delete first two characters in react hook form phoneinput

[CR1AT0RS]

I am using react hooks and I cannot seem to delete the first two inputs in the phone Input box. I am using backspace, I able to delete it with Crtl A but it just is so buggy, it either brings back the old default value or changes sometimes. Has anyone else faced this non deletion?

<PhoneInputWithCountry countryCallingCodeEditable={true} defaultCountry="US" defaultValue={value} international placeholder="(555) 987-6543" className="border-0 py-2" name="phoneInput" control={control} rules={{ required: true, validate: isValidPhoneNumber || 'Number is not valid' }} inputComponent={CustomInput} />

[catamphetamine]

Seems like no one have.

[CR1AT0RS]

Created a CodeSandbox to demonstrate the problem: https://codesandbox.io/s/fervent-leavitt-9tyy9z?file=/pages/index.js

Tested on:

Browser: Chrome/Safari.
Next JS
React Hook Forms

[catamphetamine]

[CR1AT0RS]

Fixed, it's working now. https://codesandbox.io/s/fervent-leavitt-9tyy9z?file=/.eslintrc.json

[catamphetamine]

@CR1AT0RS Indeed. Didn't test with the defaultValue. Published react-phone-number-input@3.1.50 with a fix.

[CR1AT0RS]

Many, thanks, confirmed fixed now. Cheers!

[MrYoshik]

@catamphetamine I can still reproduce it.

import "./styles.css"; import { useForm, Controller } from 'react-hook-form' import PhoneInput from 'react-phone-number-input'

import 'react-phone-number-input/style.css'

export default function App() { const { control, } = useForm({ defaultValues: { phone: "+8106", }, })

return ( <Controller name="phone" control={control} rules={{ required: true }} render={({ field: { onChange, value } }) => ( < PhoneInput value={value} onChange={onChange} defaultCountry="US" id="phone" / > )} /> ); }

[catamphetamine]

Yuri Vodyanitsky: post a link to a simple online demo with steps description

On Fri, 21 Oct 2022 at 10:21, Yuri Vodyanitsky @.***> wrote:

@catamphetamine https://github.com/catamphetamine I can still reproduce it.

import "./styles.css"; import { useForm, Controller } from 'react-hook-form' import PhoneInput from 'react-phone-number-input'

import 'react-phone-number-input/style.css'

export default function App() { const { control, } = useForm({ defaultValues: { phone: "+8106", }, })

return ( <Controller name="phone" control={control} rules={{ required: true }} render={({ field: { onChange, value } }) => (

)} /> ); }

— Reply to this email directly, view it on GitHub https://github.com/catamphetamine/react-phone-number-input/issues/405#issuecomment-1286562241, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADUP3Y24L46PVT2PLWRRLDWEJAADANCNFSM5S6LQROA . You are receiving this because you were mentioned.Message ID: @.***>

[MrYoshik]

Try to erase the default value. Would be nice to use onChange from field without adding additional state https://codesandbox.io/s/zen-morse-zxpof0?file=/src/App.js

[catamphetamine]

The onChange() function supplied by a react-hook-form Controller gets called with a null argument when the input gets cleared:

https://github.com/catamphetamine/react-phone-number-input/blob/01854d65ce69267bfb92ec544f45a4f08240fee3/source/react-hook-form/ReactHookFormInput.js#L74-L76

    const onChangeCombined = useCallback((value) => {
      // `feact-hook-form` doesn't know how to properly handle `undefined` values.
      // https://github.com/react-hook-form/react-hook-form/issues/2990
      if (value === undefined) {
        value = null
      }
      onChange(value)
      if (onChange_) {
        onChange_(value)
      }
    }, [
      onChange,
      onChange_
    ])

react-hook-form docs prohibit using undefined as an argument but do allow null value:

Calling onChange with undefined is not valid. You should use null or the empty string as your default/cleared value instead.

https://react-hook-form.com/api/usecontroller/controller

[catamphetamine]

@MrYoshik No, you're not using the component correctly. Import from different path. https://github.com/catamphetamine/react-phone-number-input#react-hook-form

// "Without country select" component.
import PhoneInput from "react-phone-number-input/react-hook-form-input"

// "With country select" component.
import PhoneInputWithCountry from "react-phone-number-input/react-hook-form"

import { useForm } from "react-hook-form"

export default function Form() {
  const { control, handleSubmit } = useForm()
  return (
    <form onSubmit={handleSubmit(...)}>
      <PhoneInput
        name="phoneInput"
        control={control}
        rules={{ required: true }} />

      <PhoneInputWithCountry
        name="phoneInputWithCountrySelect"
        control={control}
        rules={{ required: true }} />

      <button type="submit">
        Submit
      </button>
    </form>
  )
}