Is there a way of disabling the autofill of input in React?

Question

I have a react app that has a couple of inputs. The problem is, whenever I navigate to the page, it auto-fills all the fields with previously entered data on Microsoft Edge (The new one). I use Materialize for my styling. I implement my form like so:

<form onSubmit={this.handleSubmit} autoComplete='off' className="login-form">
    <div className="input-field">
        <input 
        placeholder='Type email here' 
        id="email" 
        type="email"
        required 
        className="validate contact-input" 
        onChange={this.handleChange}/>
        
        <label 
        className="active" 
        htmlFor="email">Email</label>
    </div>

    <div className="input-field">
        <input 
        placeholder='Type password here' 
        id="password" 
        type="password"
        required 
        className="validate contact-input" 
        onChange={this.handleChange}/>

        <label 
        className="active" 
        htmlFor="password">Password</label>
    </div>

    <div className="input-field col s6">
        <button className="btn z-depth-2 login-btn">
            Sign In
        </button>
    </div>
</form>

Some solutions I have tried that do not work include:

<form autoComplete="off">
...
</form>

<form autoComplete="new-password">
...
</form>

<input autoComplete="off" />

<input autoComplete="new-password" />

<input autoComplete="none" />

Anyone know how to fix this?

Have you seen https://stackoverflow.com/questions/32785958/disable-input-text-suggestions-in-edge? — Christian, Mar 31 '21 at 23:24
tried them. The one that came claose was the autoComplete="false" but it remains clear for just a few seconds then fills again — Sky Lurk, Mar 31 '21 at 23:41
An old discussion says that it is simply ignored: https://stackoverflow.com/questions/42652094/disable-form-completion-in-ms-edge and offers a workaround using javascript. There is also an interesting discussion in github: https://gist.github.com/runspired/b9fdf1fa74fc9fb4554418dea35718fe — Christian, Apr 01 '21 at 20:50

MB_ · Answer 1 · 2021-03-31T23:25:33.067

0

Try this :

<input type="text" autocomplete="off" list="autocompleteOff" 
id="fieldId" name="fieldname" placeholder="Placeholder here" />

Answer from here : Disable input text suggestions in Edge?

edited Mar 31 '21 at 23:25

answered Mar 31 '21 at 23:17

MB_

1,667
1
6
14

It still autofills on Edge – Sky Lurk Mar 31 '21 at 23:21

Is there a way of disabling the autofill of input in React?

1 Answers1