How to set autocomplete="off" in vaadin

Question

Is it possible to set HTML5 attribute autocomplete="off" on TextField in Vaadin 7? I've searched but found no way to set attributes on text fields or just hint browser to disable native autocompletion on input fields in some other way in vaadin.

Johnsonjohnsonese

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')");

Octahedral

Hi Krayo I just added this and it works but as I am refreshing the page it goes off is there any solution for that? – Slumber

Answer 2

Extend the TextField...

package com.example;
import com.vaadin.ui.TextField;

public class MyTextField extends TextField {
   // do other customization here  as needed
}

...and - what's the key point here - its client-side 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;
   }

}

Don't forget to recompile the widget set.

Rosariarosario

I'm no longer working on the Vaadin project to confirm if it works or not. If some third party confirms, I'll set this answer as accepted as it would be my preferred way to do in Java, rather than with JavaScript – Auger

Answer 3

If you use the Viritin add-on, you can now use the HtmlElementPropertySetter class to wrap your TextField component and use that to set the "autocomplete" element property to "off". You could also use the MTextField component that comes with Viritin and just create it as follows:

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

Dovelike

Answer 4

This is an extension to @Wojciech Marciniak's answer. His approach worked for me, but I want to note a couple or three modifications I had to do in order for it to work as of 2017/11/28.

1) autocomplete="off" don't seem to work anymore nowadays; at least not on Chrome. Instead, you can use autocomplete="new-password", which works on Chrome 62.0.3202.94 windows 64 bits. I also noticed some inconsistent behaviour with this attribute, as NOT always works - sometimes a list with choices for passwords will show up on the component (specially until you refresh a couple of times, etc.).

2a) Instead of extending the component, you may want to overwrite it by creating the com.vaadin.client.ui.(component)field package in your project, then put the modified (component)FieldConnector.java file in it (in my case I was modifying PasswordField) in case you want all your instances of this component to not remember passwords. The final class source 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;
    }
}

So this way you don't need any other class extending TextField (or PasswordField).

2b) If you want to allow some fields to remember passwords and other that don't, you can extend the component and use your preferred component accordingly. You can keep your connector class as in 2a) but remember to name it something like CustomPasswordFieldConnector, and it should also @Connect with that CustomPasswordField.class, put that class wherever it fits in your project and remember to add the proper import for it in the connector in case it's needed. This class is just a dummy one - you can leave its contents empty in case you don't need any extra functionality (but remember it should extend the proper (component)Field; PasswordField in the example).

Longcloth