Browser Autocomplete/Autofill does not fill input despite user selection

[henrythe9th]

Hi,

Thanks for providing this plugin, it's been really helpful. I wanted to add the brower's html autoComplete = 'mobile tel' property to help users fill their phone numbers faster:

<Phone
            placeholder="Your Phone Number"
            value={ this.state.number }
            onChange={ number => {
              this.setState({ number })
            }}
            autoComplete='mobile tel'
/>   

While this does show the browser autocomplete dropdown on mobile and desktop:

When the user actually selects one of the options, the input does not change and there are no errors in the console.

Do you know why this might be and how we can go about solving this?

Thanks for your help in advance,
Henry

[catamphetamine]

There have been previous reports of autofill not working in Chrome.
#40
That time it worked for me, but I was on Hackint0sh.
Now I'm on Windows and it doesn't work for me too.

I did some investigation and seems that onChange is not fired when selecting an autoComplete value from the dropdown.
Seems like an issue with React
facebook/react#1159
I'll see if they found any solution for that.

[catamphetamine]

Well, a quick glance at this issue suggests that there's no solution so far and the buggy behaviour being observed is the (ir)responsibility of web browser developers not caring for emitting proper events.
https://stackoverflow.com/questions/11708092/detecting-browser-autofill/11710295#11710295
Thus, I guess this issue won't (can't) be resolved.
But it will be left open so that others are aware.

[catamphetamine]

Hmm, okay, so there is a solution at least for modern Chrome:

facebook/react#1159 (comment)

Change event is emitted in Chrome v62 when you wrap inputs by a <form /> element.

So, yes, just wrap the <Phone/> in a <form/> and it starts working.
cc @alicerocheman

I guess I'll add that to the readme.
https://github.com/catamphetamine/react-phone-number-input#autocomplete

Note: don't wrap two <Phone/>s with the same autoComplete in a single <form/> because both of them will be filled with the same phone number.

[catamphetamine]

See the updated demo: autocomplete now works for me.
http://catamphetamine.github.io/react-phone-number-input/