igo
igo

Reputation: 6868

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

Views: 9329

Answers (6)

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

Imran
Imran

Reputation: 121

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

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

Upvotes: 3

hwkd
hwkd

Reputation: 2648

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

Upvotes: 1

morinx
morinx

Reputation: 635

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

Upvotes: 2

Related Questions