How to use (browser)autocomplete with Vaadin 10 TextField

Question

I try to build an reservation Form with vaadin 10 while building it i encounterd the problem, that the autocompletion we know from every form on te web doesn't work. I put in an name field the name press submit an the next time i want to re-enter the name i need to write it out again.

My code looks like that (shortend):

TextField name = new TextField();
Button save = new Button("submit");
save.addClickListener(event -> save());
name.setAutocomplete(Autocomplete.ON);
add(name);
add(save);

i had the hopes that Autocomplete.On does the magic for me but it seems not to work. Maybe the way the save methode works screw things up?

the methode is rather big i just simplify it

private void save() {
  --save everything to db
  --remove all fields
  --replace the fields with text saying reservation done
}

Answer 1

found out that someone created issue https://github.com/vaadin/vaadin-text-field/issues/156

seems to be an Shadow DOM limitation

Related issues:

https://bugs.chromium.org/p/chromium/issues/detail?id=746593

https://bugs.webkit.org/show_bug.cgi?id=172567

Edit:

for auto completion for my loginForm i got it working with adding

class xyz extends Div implements PageConfigurator{

...

@Override
public void configurePage(InitialPageSettings settings) {
    settings.addInlineWithContents(
    InitialPageSettings.Position.PREPEND,
    "window.customElements=window.customElements||{}; 
     window.customElements.forcePolyfill=true; 
     window.ShadyDOM={force:true};", 
     InitialPageSettings.WrapMode.JAVASCRIPT);
}

Answer 2

I came across this issue recently with Vaadin 14 and a custom login form. Chrome only offers auto-filling fields (and also save login details) if it can see the input tags with name attributes in the Light DOM, but Vaadin creates TextFields with all of its elements inside of a Shadow DOM hidden.

Solution is to create a reference with <input slot="input"> inside the parent <vaadin-text-field> as part of Light DOM. All the styles and everything will still be in the Shadow DOM but Chrome now can see the input fields for auto-completion.

Kotlin code:

val username = TextField().apply {
        element.setAttribute("name", "username")
        element.appendChild(Element("input").setAttribute("slot", "input"))
}
val password = PasswordField().apply {
        element.setAttribute("name", "password")
        element.appendChild(Element("input").setAttribute("slot", "input"))
}
add(username, password)