How to set autocomplete = "off" in vaadin

Question

Can I set the HTML5 autocomplete="off" attribute on a TextField in Vaadin 7 ? I searched, but did not find a way to set attributes in text fields, or just tell the browser to disable the built-in autocomplete on input fields in some other way in vaadin.

Answer 1

I think the only way if you use javascript:

 TextField tf = new TextField(); tf.addStyleName("xyz"); JavaScript.getCurrent().execute( "document.getElementsByClassName('xyz')[0].setAttribute('autocomplete', 'off')"); 

Answer 2

Extend TextField ...

 package com.example; import com.vaadin.ui.TextField; public class MyTextField extends TextField { // do other customization here as needed } 

... and - what does the key point mean - its client connector

 package com.example.client; import com.vaadin.client.ui.VTextField; import com.vaadin.client.ui.textfield.TextFieldConnector; import com.vaadin.shared.ui.Connect; @Connect(com.example.MyTextField.class) public class MyTextFieldConnector extends TextFieldConnector { @Override public VTextField getWidget() { VTextField vTextField = super.getWidget(); vTextField.getElement().setAttribute("autocomplete","off"); return vTextField; } } 

Remember to recompile the widget set.

Answer 3

If you use the Viritin add-on , you can now use the HtmlElementPropertySetter class to wrap the TextField component and use it to set "autocomplete" to "off". You can also use the MTextField component that comes with Viritin and simply create it like this:

 MTextField username = new MTextField("Username") .withAutocompleteOff(); 

Answer 4

This is an extension for @Wojciech Marciniak's answer. His approach worked for me, but I want to point out a couple or three modifications that I had to make for it to work from 2017/11/28.

1) autocomplete="off" now does not seem to work anymore; at least not in Chrome. Instead, you can use autocomplete="new-password" , which works on 64-bit, 64-bit, 64-bit versions of Chrome. I also noticed some inconsistent behavior with this attribute, since it does NOT always work - sometimes a list with password options will be displayed on the component (especially until you update a couple of times, etc.).

2a) Instead of extending the component, you can overwrite it by creating the package com.vaadin.client.ui.(component)field in your project, and then put the modified file (component)FieldConnector.java (in my case, I changed PasswordField ) if you want all your instances of this component not to remember passwords. The final class should look like this:

 package com.vaadin.client.ui.passwordfield; import com.vaadin.client.ui.VPasswordField; import com.vaadin.client.ui.textfield.TextFieldConnector; import com.vaadin.shared.ui.Connect; import com.vaadin.ui.PasswordField; @Connect(PasswordField.class) public class PasswordFieldConnector extends TextFieldConnector { @Override public VPasswordField getWidget() { VPasswordField vTextField = (VPasswordField) super.getWidget(); vTextField.getElement().setAttribute("autocomplete","new-password"); return vTextField; } } 

Thus, you do not need any other class extending TextField (or PasswordField).

2b) If you want to allow some fields to remember passwords and others that do not, you can expand the component and use your preferred component accordingly. You can save your connector class as in 2a), but don't forget to call it something like CustomPasswordFieldConnector , and it should also @Connect with this CustomPasswordField.class, put this class where it fits in your project, and don't forget to add the correct import for it in the connector if necessary. This class is simply fictitious - you can leave its contents empty if you do not need any additional functions (but remember that in this example you need to extend the (component)Field ; PasswordField ).