-
Notifications
You must be signed in to change notification settings - Fork 4.1k
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Support for Chrome autofill #1397
Comments
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. |
Hey guys, I intend to work on a fix for this. Any inputs from the contributors would be appreciated. |
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. :-) |
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.
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. |
I am currently working on a fix for this issue and created a pull-request over here: #2174. Any help is very appreciated :) |
Hello - In an effort to sustain the 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. |
Yes, I feel like this is still relevant. I helped implement the original PR for this, @mmintel was a coworker. |
Thanks @jzaefferer! |
Def still needed! Especially if a PR exists |
Thanks @bradennapier! |
I need this soon please! Thanks! |
Converting this from an issue to discussion. Please note, that some comments were left with the associated PR: #2395. I recently began working on a POC of how to implement this without changing react-select source code. If someone is willing to create a codesandbox that my Chrome autofill is willing to recognize, I'd be happy to test and verify against and then have it added to the codesandbox gallery. |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
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?
The text was updated successfully, but these errors were encountered: