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

[TextField] Form autofill doesn't update floating label text on textfield #718

Closed
illogikal opened this issue May 29, 2015 · 75 comments
Closed

Comments

@illogikal
Copy link

@illogikal illogikal commented May 29, 2015

When you use chrome to autofill text fields, the floating label text doesn't animate and show at all (as of 0.8.0)

@illogikal
Copy link
Author

@illogikal illogikal commented May 29, 2015

This is probably a good place to start...

@hai-cea hai-cea changed the title Form autofill doesn't update floating label text on textfield [TextField] Form autofill doesn't update floating label text on textfield Jun 19, 2015
@shaurya947
Copy link
Contributor

@shaurya947 shaurya947 commented Nov 13, 2015

@illogikal could you post of gif that?

@mbrookes
Copy link
Member

@mbrookes mbrookes commented Dec 27, 2015

Here you go:

image

The yellow highlight indicates the fields have been autofilled. As you can see, the password is filled, but the label is still in place.

@newoga
Copy link
Contributor

@newoga newoga commented Dec 28, 2015

Mm, that's interesting. @mbrookes Do you know if it's for all input types or just password inputs?

@mbrookes
Copy link
Member

@mbrookes mbrookes commented Dec 28, 2015

Not sure - I tried swapping the order of address and password, but autofill didn't fire, either to fill in a known user/password, or to save a new one. I'll have to figure out how best to test other fields.

@newoga
Copy link
Contributor

@newoga newoga commented Dec 28, 2015

Okay, I plan on revisiting refactoring some of the TextField stuff in the near future. I'll try to experiment a bit too. Let me know if you notice anything else.

@simensen
Copy link

@simensen simensen commented Feb 11, 2016

Hello! We're running into this issue. Is there anything we can do locally to try and experiment w/ some potential fixes for this? Or is it going to have to wait on a refactor?

@simensen
Copy link

@simensen simensen commented Feb 11, 2016

We have the exact problem with the password field listed above. In addition to that we have a similar problem with a plain TextField. We have hint text set which goes away if you type values in. However, if we set a value when the page renders (deep link) the hint text is still visible behind the actual value. Is this likely the same issue or would that be something separate?

image

@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Feb 11, 2016

Is this likely the same issue or would that be something separate?

That looks like a different issue.

@antoinerousseau
Copy link
Contributor

@antoinerousseau antoinerousseau commented Feb 18, 2016

that code could be added to onChange to update a state.isAutofilled

@liesislukas
Copy link
Contributor

@liesislukas liesislukas commented Mar 17, 2016

Chrome Version 49.0.2623.87 (64-bit) OS X El Capitan

image

if any key is pressed or mouse clicked - it floats correctly, but initial load is broken.

@buunguyen
Copy link

@buunguyen buunguyen commented Apr 4, 2016

Exact same problem:

s

@cezarsmpio
Copy link

@cezarsmpio cezarsmpio commented Apr 27, 2016

Any idea, guys?

@wojtkowiak
Copy link

@wojtkowiak wojtkowiak commented May 6, 2016

Experiencing the same issue.

@kand617
Copy link

@kand617 kand617 commented May 11, 2016

Is there a way to disable autofill that works with MUI?

@mbrookes
Copy link
Member

@mbrookes mbrookes commented May 11, 2016

@kand617

Simply create a couple of fields and make them hidden with "display:none". Example:

Then put your real fields underneath.

http://stackoverflow.com/questions/15738259/disabling-chrome-autofill

@devdlabs
Copy link

@devdlabs devdlabs commented May 25, 2016

any solution to fire onChange event ?

@devdlabs
Copy link

@devdlabs devdlabs commented May 30, 2016

@antoinerousseau Is this going to be merged in master?

@mbrookes
Copy link
Member

@mbrookes mbrookes commented May 30, 2016

@cacieprins
Copy link

@cacieprins cacieprins commented Jun 22, 2016

This might be a similar issue (same root cause, different manifestation?)

I'm not seeing the animation issues as mentioned, but the height of the TextField container does not take into account the top margin on the input. This results in the TextField extending 14px below the container. It's a fairly straightforward workaround, but I'm only seeing it with autocomplete:

screen shot 2016-06-22 at 9 58 04 am
screen shot 2016-06-22 at 9 58 16 am
screen shot 2016-06-22 at 9 58 27 am
screen shot 2016-06-22 at 9 58 34 am

@nathanmarks
Copy link
Member

@nathanmarks nathanmarks commented Jul 9, 2016

This will be fixed soon ;)

image

@antoinerousseau
Copy link
Contributor

@antoinerousseau antoinerousseau commented Jul 9, 2016

nice @nathanmarks, thanks!!

and did you find a hack to update the floating label when chrome autofills without clicking the page, too?

@adamtal3
Copy link

@adamtal3 adamtal3 commented Jul 26, 2016

This is still a pretty painful issue.

I tried using vanilla-autofill-event which just didn't work.

I'm using redux-form (like many others) and I came around with an ugly workaround (just for my login form, I don't care about other forms).
I tested it only in chrome so use it under consideration.

When I added an hidden username and password fields chrome ignored the entire form (unless hiding them with display:none which chrome didn't care about).

So I used 4 ( 😞 ) extra fields. 2 to make chrome ignore my form (autocomplete=off didn't work) and 2 more in a different fake form to make chrome fill, than in componentDidMount I added a timeout that copied the values from the fake fields to the real ones using redux-form change event:

class Login extends Component {
  // This was tested under chrome only. It's ugly, but it works. Code was modified a bit for simplicity so it might not work out of the box.

  componentDidMount() {
    // Fix chrome auto-fill
    setTimeout(() => {
      const { change, dispatch }= this.props;
      if (this.refs.usernameAutoFill.value && ! this.refs.username.value) {
        dispatch(change('username', this.refs.usernameAutoFill.value));
      }
      if (this.refs.passwordAutoFill.value && !this.refs.password.value) {
        dispatch(change('password', this.refs.passwordAutoFill.value));
      }
    }, 500);
  }

  render() {
    const styles = {
      autofill: {
        height: 0,
        width: '1px',
        position: 'absolute',
        left: 0,
        top: 0
      }
    };

    return (
      <div>
        <form style={styles.autofill}>
          <input type="text" ref="usernameAutoFill" name="usernameAutoFill" />
          <input type="password" ref="passwordAutoFill" name="passwordAutoFill" />
        </form>
        <form autocomplete="off">
          <div style={styles.autofill}><input type="text" name="fakeusername" /><input type="password" name="fakepassword" /></div>
          <Field name="username" component={() => <TextField ref="username" name="username" floatingLabelText="Username" />}/>
          <Field name="password" component={() => <TextField ref="password" name="password" type="password" floatingLabelText="Password" />}/>
          <RaisedButton primary={true} label="Login" type="submit"/>
        </form>
      </div>
    )
  }
}
export default {
  Form: reduxForm({
    form: 'Login'
  })(Login)
}

I've modified the code for simplicity so use it just for reference.

@mbrookes
Copy link
Member

@mbrookes mbrookes commented Jun 16, 2018

@tsmirnov Time for you to get stuck in and fix it then. 😜

@ozturkcangokkaya
Copy link

@ozturkcangokkaya ozturkcangokkaya commented Aug 1, 2018

There is a css solution to this bug

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}
@kishan3
Copy link

@kishan3 kishan3 commented Oct 8, 2018

Here you go:

image

The yellow highlight indicates the fields have been autofilled. As you can see, the password is filled, but the label is still in place.

I am facing the same issue.

@kishan3
Copy link

@kishan3 kishan3 commented Oct 8, 2018

There is a css solution to this bug

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Can you please explain what this means ?

@ozturkcangokkaya
Copy link

@ozturkcangokkaya ozturkcangokkaya commented Oct 8, 2018

There is a css solution to this bug

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Can you please explain what this means ?

:-webkit-autofill selects autofilled fields by browser. Place your label right next to input and select it with :-webkit-autofill selector. If you need more help please share your current html structure.

@kishan3
Copy link

@kishan3 kishan3 commented Oct 9, 2018

There is a css solution to this bug

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Can you please explain what this means ?

:-webkit-autofill selects autofilled fields by browser. Place your label right next to input and select it with :-webkit-autofill selector. If you need more help please share your current html structure.

Sure! Here is my HTML Please help. Thanks
https://pastebin.com/yjJCip3r

@ozturkcangokkaya
Copy link

@ozturkcangokkaya ozturkcangokkaya commented Oct 9, 2018

There is a css solution to this bug

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

Can you please explain what this means ?

:-webkit-autofill selects autofilled fields by browser. Place your label right next to input and select it with :-webkit-autofill selector. If you need more help please share your current html structure.

Sure! Here is my HTML Please help. Thanks
https://pastebin.com/yjJCip3r

Your labels come right after the inputs, so you dont have to do anything with html.
Just select your labels right next to autofilled inputs and set them your active label styles as shown below.

.mdl-textfield__input:-webkit-autofill + .mdl-textfield__label {
    // Active label styles here
    top: -20px; // Just an example
    transform: scale(0.75); // Just an example
}
@mbrookes
Copy link
Member

@mbrookes mbrookes commented Oct 9, 2018

Uh, @kishan3 I think you're lost. MDL is this way --> google/material-design-lite#4827 😆

(Although given that MDL is dead Jim, perhaps you've come to the right place after all!)

@kishan3
Copy link

@kishan3 kishan3 commented Oct 11, 2018

Ah damn! Its confusing with names. 😆 @mbrookes One question though: can we use material UI directly into HTMLs with CDN links? I never realised MDL is dead 😢

@mbrookes
Copy link
Member

@mbrookes mbrookes commented Oct 11, 2018

@kishan3 You can, although as it says in the docs, this means the client has to download the entire library, at least the first time until it's cached, whereas building it locally means you can optimize which components are included.

@abhisheksoni27
Copy link

@abhisheksoni27 abhisheksoni27 commented Oct 25, 2018

What's the solution?

@mui-org mui-org locked as resolved and limited conversation to collaborators Oct 25, 2018
@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Oct 25, 2018

This issue concerns v0.x.

@mui-org mui-org unlocked this conversation Oct 31, 2018
@efstathiosntonas

This comment was marked as off-topic.

@tom-con
Copy link

@tom-con tom-con commented Dec 6, 2018

If anyone is still here, I just set this prop InputLabelProps={{ shrink: true }} on the TextField that this effected. Was the best solution for our team.

@arshmakker
Copy link

@arshmakker arshmakker commented Jan 10, 2019

@tom-con thanks man, it worked for me perfectly

@ymoon715
Copy link

@ymoon715 ymoon715 commented Jan 25, 2019

screen shot 2019-01-24 at 10 47 44 pm
this problem still exists in 2019...

@rehan-sattar
Copy link

@rehan-sattar rehan-sattar commented Feb 27, 2019

If anyone is still here, I just set this prop InputLabelProps={{ shrink: true }} on the TextField that this effected. Was the best solution for our team.
I was really confused and you solved the problem! Best recommended solution!

@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Feb 27, 2019

This is a v0.x issue (2015), please refer to #14427.

@prakashtsi
Copy link

@prakashtsi prakashtsi commented Apr 2, 2019

There is a css solution to this bug

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

@ozturkcangokkaya Hi this css solution works fine in Chrome. But when i check my form in firefox, floating label is not working. Do you have any idea why webkit-autofill affects firefox?

@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Apr 2, 2019

Please see #14427 for v4.

@jlomoglio

This comment was marked as off-topic.

@scatteredlife
Copy link

@scatteredlife scatteredlife commented Sep 7, 2019

If anyone is still here, I just set this prop InputLabelProps={{ shrink: true }} on the TextField that this effected. Was the best solution for our team.

Thank you, I am using this: InputLabelProps={{ shrink: form.password }} , and it works perfectly.

<TextField
                id="loginPassword"
                label="Login Password"
                type="text"
                fullWidth
                value={form.password}
                onChange={(e) => setAttribute('form.password', e.target.value)}
                InputLabelProps={{ shrink: form.password }}
              />
@matsmello
Copy link

@matsmello matsmello commented Jan 28, 2020

I solved my problem installing lodash.merge on my project then I realised I was filling the text field component incorrectly it was because I thought the redux behaves should be the same when I use nested objects.

As you can see, I am not filling correctly when I mixing two nested objects.

image

I solved this using the library and so it was.
image

@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Jan 28, 2020

Note that the latest version of Material-UI (v4.9.0) supports it by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet