React Materialize Change input type from "password" to "new-password"

I have two forms in React project: Register and Login. I'm using Materialize.

<div className="input-field col s12">
     <i className="material-icons prefix">vpn_key</i>
     <input id="password" type="password" className="validate" required />
     <label htmlFor="password">Password</label>
</div>

And React shows warnings:

Input elements should have autocomplete attributes (suggested: "new-password")

Input elements should have autocomplete attributes (suggested: "current-password")

When I change type to type="new-password" - there is no warning anymore, but Materialize input field not working properly... Did anyone have such issue, and how it can be solved?

Solution

You just need to set the autocomplete attribute.

<div className="input-field col s12">
  <i className="material-icons prefix">vpn_key</i>
  <input
    autoComplete="current-password"
    id="password"
    type="password"
    className="validate"
    required
  />
  <label htmlFor="password">Password</label>
</div>

The input type and auto complete attributes are not the same thing. Input type specifies what type of input it is, text, checkbox, password, etc.., but autoComplete are suggestions(hints) to the browser what the input may actually be for. In this case, current-password will hint to the browser to autocomplete any saved passwords while new-password won't, for obvious reason.

"new-password"

passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also Preventing autofilling with autocomplete="new-password").A new password. When creating a new account or changing

"current-password"

The user's current password.