React-select: Support for Chrome autofill

[casschin]

I have some address fields that I want to be able to complete with Chrome's autocomplete feature, but I'm having trouble getting it to select a value in my state input that's using react-select. I've tried swapping it out with a native select input and the autofill works properly there.

I also tried using autocomplete on the demo inputs and wasn't able to get it working there.

Is this a known issue?

[Ryanthegiantlion]

Had the same issue. I see that the component uses a hidden type input field which chrome will not autofill.

A workaround I used is to wrap the select component and place an absolutely positioned text input above with zero width, height and opacity. Then set the select input value in the on change of the hidden input.

[shreyansqt]

Hey guys, I intend to work on a fix for this. Any inputs from the contributors would be appreciated.

[Ryanthegiantlion]

So one potential avenue is suggested by the workaround I mentioned above. There is a hidden input which is used to store the value and make sure the data is posted back with a form submission. One option is to add another text input which is used by the autofill and handle updating of react select in the onchange handler of the text input. Then hide the text input with css so that it doesn't mess with the UI. Another option might be to swap the hidden input out for the text input, but I didn't look into that since I didn't want to modify the existing code. A third option would be to try and get chrome to play well with the existing hidden input but afaik you can't do that.

Edit: I just noticed that you asked for input from the contributors which I am not. But it may be helpful and it did work in my case so going to leave this here anyway. :-)

[jzaefferer]

For "hiding via CSS", this snippet might be useful: https://github.com/jquery/jquery-ui/blob/74f8a0ac952f6f45f773312292baef1c26d81300/themes/base/core.css#L17-L26

Might be overkill in this case, since this isn't hiding-for-accessibility.

A third option would be to try and get chrome to play well with the existing hidden input but afaik you can't do that.

Chrome not filling out hidden inputs is probably a security feature, to prevent harmless looking forms (like a search) to capture important data like credit card details.

[mmintel]

I am currently working on a fix for this issue and created a pull-request over here: https://github.com/JedWatson/react-select/pull/2174. Any help is very appreciated :)

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

[jzaefferer]

Yes, I feel like this is still relevant. I helped implement the original PR for this, @mmintel was a coworker.

[bladey]

Thanks @jzaefferer!

[bradennapier]

Def still needed! Especially if a PR exists

[bladey]

Thanks @bradennapier!

[Uniphix]

I need this soon please! Thanks!