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>
-
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– Jovica Aleksic2018-08-15 06:08:37 +00:00Commented Aug 15, 2018 at 6:08
Add a comment
|
6 Answers
<Form autoComplete="off">
</Form>
WOrks for me... Shouldn't be an issue
Comments
I don't think you can put autoComplete on Form.
Instead try it on either Form.Group or on each Input.
2 Comments
Christophe Vidal
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...
boj
It does not work, Safari still try to fill Input out in the Form.
It should work. It works on mine when I tested it on my application. So it's not a problem with semantic-ui-react.
Comments
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
Comments
<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>
Comments
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
