How to disable form autocomplete in semantic-ui-react?

Question

How can I disable autocompleting form with credentials in semantic-ui-react? Tried this but it does not work

import { Form } from 'semantic-ui-react';
<Form autoComplete="off">
....
</Form>

Ratify

Funny. I wish I could make it work instead of prevent it. For me it just doesn't work, even with proper "autocomplete" attributes on the input elements in the DOM... – Dykes

Answer 1

<Form autoComplete="off">
</Form>

WOrks for me... Shouldn't be an issue

Devaney

Answer 2

I don't think you can put autoComplete on Form. Instead try it on either Form.Group or on each Input.

Shush

Indeed it works, but you need to mind the case with a capital C like you wrote above, even so it shows autocomplete when rendered as HTML attribute... – Estivation

It does not work, Safari still try to fill Input out in the Form. – Fraenum

Answer 3

It should work. It works on mine when I tested it on my application. So it's not a problem with semantic-ui-react.

Pineapple

Answer 4

It didn't work for my case, the name of the Dropdown field is "state" so Chrome address autofill ignores the autocomplete attribute. After some struggle, I found that role="presentation" does the trick. So I get the input ref from the dropdown by ref.ref.firstChild, and setAttribute('role', 'presentation'). It works like a charm

Dehumanize

Answer 5

<Form autoComplete="off"> will render to HTML <form autocomplete="off"> (link1) and it will then disable the autocompletion for all the form fields, except for passwords because of link2, where we can also read :

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password".

Which leads to the second part of the answer : how to set the autocomplete attribute for individual fields ? either off or new-password or any of link1 (given-name, email, country …).

The components don't have a specific prop for it (link3), but that can be resolved by passing a content template to the component :

<Form.Input type="password" name="mypassword" required>
    <input autoComplete="new-password" />
</Form.Input>

The component will then merge both the template attributes and its props to render :

<div class="ui input">
    <input autocomplete="new-password" name="mypassword" required="" type="password">
</div>

Eupheemia

Answer 6

If the above solutions do not work, it is also possible to disable the autocomplete function for individual input fields.

<Form.Input autoComplete='new-password' type="password" />

Will render:

<div class="field">
  <div class="ui input">
  <input type="password" autocomplete="new-password" />
</div>

https://github.com/Semantic-Org/Semantic-UI-React/issues/3743

Zetland