Skip to content
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

[SelectField] Browser address autofill does not work when used for the state field #6324

Closed
gmacciocca opened this issue Mar 10, 2017 · 4 comments
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module!

Comments

@gmacciocca
Copy link

Description

I have an address form where for the "state" two letter code, I use material-ui SelectField. Problem is that this SelectField does not autofill with the correct state code, when the browser proposes an autofill address. All other text fields (address, city, zip-code) autofill correctly. I've tested this with Chrome/Firefox/IE/Edge/Safari.
I posted this question on stackoverflow a few days ago, but received no answer.
http://stackoverflow.com/questions/42616428/browser-address-autofill-does-not-fill-a-state-selectfield-element

Images & references

You can test this on my github,io deployment here:
https://gmacciocca.github.io/coffee-with-congress

Problem description

The SelectField for the state does not fill in response to the autofill data provided by the browser.

Link to minimally-working code that reproduces the issue

https://gmacciocca.github.io/coffee-with-congress

Versions

  • Material-UI: 0.17.0
  • React: 15.3.2
  • Browser: Chrome/Firefox/IE/Edge/Safari
@mbrookes
Copy link
Member

mbrookes commented Mar 10, 2017

This is because SelectField is composed of <div>s etc. rather than using a native select> form element.

A hidden shadow element could in theory be used to capture the input, buts some browsers don't trigger DOM events on autofill as a security precaution, so it wouldn't be possible to determine that a value had been provided without continuous polling.

This is the same issue we have with the text field label not animating on autofill.

@mbrookes mbrookes added the component: select This is the name of the generic UI component, not the React module! label Mar 10, 2017
@gmacciocca
Copy link
Author

Thanks, @mbrookes. So do you think I'm better off stop using SelectField? Submitting a fix would probably take me some time, but I can try. How likely is that this will be looked at by some of the main contributors?
Thanks.

@mbrookes
Copy link
Member

I can't see it being a high priority right now, as the focus is on porting to the new styling approach on the next branch, and there is no easy fix AFAIK.

@oliviertassinari oliviertassinari changed the title Browser address autofill does not work when using SelectField for the state field [SelectField] Browser address autofill does not work when used for the state field Mar 26, 2017
@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Mar 26, 2017
@matthoffner
Copy link

Still noticing this issue on newer versions, I don't see specifically how #8023 resolves this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

4 participants