[SOLVED] How to use (browser)autocomplete with Vaadin 10 TextField

How to use (browser)autocomplete with Vaadin 10 TextField

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
}

Solution

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

seems to be an Shadow DOM limitation

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);
}