CODEWITHSUNDEEP
htmlreactjsautocomplete
T. Evans
T. Evans

Reputation: 1001

autocomplete="current-password" in React not showing fill form

I am having an issue while using the autocomplete="current-password" where the form is not showing the current password. The password is saved in Chrome. The input is wrapped in a form. Is anyone having issues with autocomplete="current-password" not working for them?

here is my input for React:

<input
  type={this.state.visible ? `text` : `password`}
  onChange={(e) => this.props.onChange('password', e.target.value)}
  autoComplete="current-password"
  placeholder="password"
 />

I have not seen any reference to this not working or anyone mentioning this not working.

note: autoComplete must be spelled this way in React as react does not recognize the attribute as autocomplete but renders on the DOM as autocomplete

here is how the element is rendering on the DOM:

<form class="sign-in">
  <div class="input-group">
    <label>Email</label>
    <input type="email" placeholder="[email protected]" autocomplete="username" name="email" value="">
  </div>
  <div class="input-group">
    <div class="password-top">
      <label>Password</label>
      <span class="password-toggle">show password</span>
    </div>
  <input type="password" autocomplete="current-password" placeholder="password">
  <span class="forgot-password">Forgot Password?</span>
  </div>
</form>

Upvotes: 7

Views: 12487

Answers (1)

Sim Dim
Sim Dim

Reputation: 582

Your resulting HTML lacks name="password" at least.

Also, currently Chrome doesn't suggest password auto-fill for localhost. I had to turn off and turn back on auto-sign-in in Chrome settings, since my Chrome didn't suggest password auto-fills on any sites. Hope it helps.

I've tested your code in a clean react project, just added name="password" to the password input, and used a proxy to my machine. It seems to work in Chrome.

Upvotes: 6

Related Questions