UX/UI improvements

[LouisCuvelier]

Is your feature request related to a problem? Please describe.

I'm using only the hook in order to build my own component but it happens also on the <PhoneInput/> component. I've identified two problems that are well explained in this article, which I quote below :

1. If the user made a mistake with the country code after entering the number and decided to change the country, when changing it will be correct to show the new code and keep the previously entered number. Let’s say the user has selected a country code and entered their number—but they’ve made a mistake! Instead of +1 for the USA, they accidentally chose +81 for Japan. When they go back and select the proper country code, it’s good UX to keep the phone number itself inside the input—don’t wipe it clean.

save-the-input.av1.mp4

2. One unexpected problems users may encounter when filling out an input is browser auto-complete. The browser may have its own format for writing the number, so when it attempts to auto-complete numbers into our clever system, unpleasant things can happen. For instance, if you chose to use a separate input for country selection, the number is trimmed. The full length of the number is cut off because there is a strict limit on the number of characters. In this case, it is necessary to enter the number in the form intended by the user and then give them the opportunity to correct it as necessary.

autocomplete.av1.mp4

Describe the solution you'd like

Explained above.

Describe alternatives you've considered

I tried to play with the hook's callbacks and manage local state but it's hacky and doesn't remove the char limit on the input ...
I would be happy to do a PR if you think it's worth it guys.

[LouisCuvelier]

Related to #204