Issue when using with default value in react-hook-form

[PrinceGupta1999]

Hi @omeralpi thanks for the amazing component.

However I am facing an issue when using with react hook form and a default value. Whenever i react to about 2-3 digits, the form gets reset (see video below). I did try to debug by using with the debugger that comes with react-hook-form (top right in the screen recording) but could not find the cause

https://github.com/omeralpi/shadcn-phone-input/assets/32774830/4f8c8398-fe21-4fb6-82e1-9fc823e00cef

Reproducing example: https://github.com/omeralpi/shadcn-phone-input/compare/main...PrinceGupta1999:shadcn-phone-input:main#diff-c02b7335bbc2576d773763466d08672bf1290304608b585826bf87512d5138f1R27-R29

Let me know if I can provide with more info.

[omeralpi]

Hi @omeralpi thanks for the amazing component.

However I am facing an issue when using with react hook form and a default value. Whenever i react to about 2-3 digits, the form gets reset (see video below). I did try to debug by using with the debugger that comes with react-hook-form (top right in the screen recording) but could not find the cause

video1829343738.mp4 Reproducing example: main...PrinceGupta1999:shadcn-phone-input:main#diff-c02b7335bbc2576d773763466d08672bf1290304608b585826bf87512d5138f1R27-R29

Let me know if I can provide with more info.

Thank you for the detailed information.

I resolved the issue by updating the default value of the react-phone-number-input package from undefined to null. This aligns with the recommendation from react-hook-form, which suggests using null or an empty string as the default/cleared value instead of undefined.

Could you please let me know if the issue has been resolved? Thank you.

react-phone-number-input

react-hook-form

[PrinceGupta1999]

Hi @omeralpi thanks for the quick response. Although your change fixed the reported issue, it introduced another one. This time if you select a country when some default value is already present in the input. The input value clears but the country change does not reflect. It requires another selection of the country to get the change to reflect.

See video below for the example

https://github.com/omeralpi/shadcn-phone-input/assets/32774830/ed64f850-4083-4975-bfe7-086ee6e8e4e6

[omeralpi]

Hi @omeralpi thanks for the quick response. Although your change fixed the reported issue, it introduced another one. This time if you select a country when some default value is already present in the input. The input value clears but the country change does not reflect. It requires another selection of the country to get the change to reflect.

See video below for the example

video2739511984.mp4

https://github.com/omeralpi/shadcn-phone-input/assets/19254700/a844b0df-79eb-42c7-8903-c804634da373

I don't think there's a problem with that. The phone numbers for the USA and Canada are almost identical. Ultimately, the user gets the output in whatever format they want.

You can test transitions between phone numbers belonging to more specific countries.

Thank you again for your help.