2

I've created very simple form for user to sign in. Here is my code:

import React,{ Component } from 'react';

class SignIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login:"",
      pass:""
    }
  }

  signIn = (e) =>{
    e.preventDefault();
    alert("in")
  }

  handleChange = (propertyName) => (e) => {
    const state = this.state;
    const newState = {
      ...state,
      [propertyName]: e.target.value
    };
    this.setState(newState);
  }

  render() {
    return (
        <div className="text-center">
          <form onSubmit={this.signIn}>
            <input type="text" id="login" onChange={this.handleChange('login')} value={this.state.login} placeholder="login"/>
            <br />
            <input type="password" id="pass" onChange={this.handleChange('pass')} value={this.state.pass} placeholder="pass"/>
            <br />
            <input type="submit" value="sign in" disabled={((this.state.login == "") && (this.state.pass == ""))
              ? true
              : false}/>
          </form>
        </div>
    );
  }
}

export default SignIn;

For some reason every time I start my app these inputs already have some text inside. "login" always have "localhost" and "pass" contains some random numbers and letters. Can someone explain me where are these values comming from?

Kreha6
  • 81
  • 8

1 Answers1

0

These fields are auto-populated by browser. See explanation here: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

Also you might be interested in this question of how people fighting with it :) Chrome Browser Ignoring AutoComplete=Off

Dmitry Druganov
  • 1,351
  • 1
  • 11
  • 27
  • Also your case (login form) is actually what Chrome is being fighting for: help users (especially users of mobile devices) to fill in such forms again faster. So I don't think that you should try to overcome it somehow. You might also clear your auto-fill data in Chrome if it bothers you: https://www.pcworld.com/article/3145489/browsers/how-to-clear-unwanted-autofill-entries-in-google-chrome.html – Dmitry Druganov Nov 05 '17 at 21:31
  • Thanks, that's the problem. Looking for working solution – Kreha6 Nov 05 '17 at 21:33
  • It wouldn't bother me that much if values inside these inputs had some sense. i've never filled them – Kreha6 Nov 05 '17 at 21:35
  • I understand your pain, but likely that similar fields with similar signature (id, type, ...) were populated with these values somewhere else and browser remembered it. So you would probably need to clean up your Chrome auto-fill data. – Dmitry Druganov Nov 05 '17 at 21:39
  • Now it became even funnier ;p I've created another form for creating new accout. Similar inputs (just different id's)......and these inputs are clear ;p – Kreha6 Nov 05 '17 at 21:41
  • Yes, because signature of these fields is changed. Browsers [un-]fortunately are not smart enough now, so there are ways to overcome it still :) – Dmitry Druganov Nov 05 '17 at 21:44