-1

enter image description here how to turn off autocomplete of a form when switching in react form? And why is this happening?

saves the form here and then sends it to the server

const [formR, setFormR] = useState({password: '', repeat: '', login: '', email: ''})
const [formL, setFormL] = useState({password: '', email: ''})
const changeHandlerR = (event:any) => {
  return setFormR({...formR, [event.target.name]: event.target.value})
}
const changeHandlerL = (event:any) => {
  return setFormL({...formL, [event.target.name]: event.target.value})
}





    if(count === 0){
 return(<Main>
          <SectionAuth>
            <section>
              <p onClick={() => setCount(count + 1)}>Вход</p>
              <p className="active">Регистрация</p>
            </section>
            <div>
              <input type="login" name="login" placeholder="login" onKeyUp={login} onChange={changeHandlerR} required/>
              <input type="email" name="email" placeholder="email" onKeyUp={email} onChange={changeHandlerR} required/>
              <input type="password" name="password" placeholder="password" onKeyUp={checkPassword} onChange={changeHandlerR} required className="password"/>
              <input type="password" name="repeat" placeholder="password" onKeyUp={checkPassword} onChange={changeHandlerR} required className="password"/>
              <button type="submit" onClick={registerHandler} className="buttonCheck">Отправить</button>
            </div>
          </SectionAuth>
</Main>) 
  }
return(<Main>
  <SectionAuth>
    <section>
        <p className="active">Вход</p>
        <p onClick={() => setCount(count - 1)}>Регистрация</p>
    </section>
    <div>
      <input type="email" name="email" placeholder="email" onKeyUp={email} onChange={changeHandlerL} required/>
      <input type="password" name="password" placeholder="password" onKeyUp={checkPassword} onChange={changeHandlerL} required/>
      <button type="submit" onClick={loginHandler} className="buttonCheck">Отправить</button>
    </div>
  </SectionAuth>
</Main>)
}

enter image description here

When switching in a form, another form is autocompleted.

HLEB HLEB
  • 128
  • 8
  • add to tag `autoComplete="off"`? [more info](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion) – Yana Trifonova Jun 18 '21 at 07:42
  • Does this answer your question? [Reactjs AutoComplete : 'off'](https://stackoverflow.com/questions/44945995/reactjs-autocomplete-off) – Yana Trifonova Jun 18 '21 at 07:46
  • Also there are suggestions to use `autoComplete="new-password"` or even `autoComplete={'' + Math.random()}`. – Yana Trifonova Jun 18 '21 at 07:49
  • does not answer my question, because when switching ownership, one way or another, autocompletion occurs from another form. – HLEB HLEB Jun 18 '21 at 08:50

2 Answers2

1

Following 2 inputs, one has autoComplete="off" other one doesn't.

const Element = () => (
  <div>

  <input type="email" 
   name="email"
   placeholder="Email" 
   autoComplete="off"/>

  <input type="email" 
   name="email"
   placeholder="Email"/>

  </div>
);

ReactDOM.render(
  <Element />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>
Kiruna
  • 151
  • 9
0

Add to your input

autoComplete="off"

so your inputs would look like following

<input type="login" 
   name="login"
   placeholder="login"
   onKeyUp={login}
   onChange={changeHandlerR}
   autoComplete="off"
   required/>

Alternatively You could use < form > tag instead of the div

would look something like

<form method="post" action="/form" autocomplete="off">
              <input type="login" name="login" placeholder="login" onKeyUp={login} onChange={changeHandlerR} required/>
              <input type="email" name="email" placeholder="email" onKeyUp={email} onChange={changeHandlerR} required/>
              <input type="password" name="password" placeholder="password" onKeyUp={checkPassword} onChange={changeHandlerR} required className="password"/>
              <input type="password" name="repeat" placeholder="password" onKeyUp={checkPassword} onChange={changeHandlerR} required className="password"/>
              <button type="submit" onClick={registerHandler} className="buttonCheck">Отправить</button>
</form>

3rd approach would be to set the input field’s autoComplete attribute to "new-password".

as in

<input type="password" 
       name="password_signup"
       placeholder="Password" 
       autoComplete="new-password"
       onKeyUp={checkPassword} 
       onChange={changeHandlerR} 
       required />
Kiruna
  • 151
  • 9