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

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>

Upvotes: 12

Answers (6)

monkey-0001

Reputation: 492

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

Upvotes: 0

challet

Reputation: 972

<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>

Upvotes: 0

Zhenxi

Reputation: 11

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

Upvotes: 0