9

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>
igo
  • 5,007
  • 6
  • 37
  • 45
  • 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... – Jovica Aleksic Aug 15 '18 at 06:08

5 Answers5

2

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

morinx
  • 615
  • 7
  • 18
  • 1
    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... – Christophe Vidal Dec 18 '18 at 16:57
2
<Form autoComplete="off">
</Form>

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

Imran
  • 91
  • 1
  • 1
  • 7
1

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

Javascriptonian
  • 1,550
  • 1
  • 11
  • 24
0

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

Zhenxi
  • 11
  • 1
0

<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>
challet
  • 768
  • 6
  • 20