如何在 Vaadin 10 TextField 中使用（浏览器）自动完成功能答案

【问题标题】：How to use (browser)autocomplete with Vaadin 10 TextField如何在 Vaadin 10 TextField 中使用（浏览器）自动完成功能
【发布时间】：2018-11-18 14:20:53
【问题描述】：

我在构建时尝试使用 vaadin 10 构建预订表单，但遇到了问题，即我们从 te web 上的每个表单中知道的自动完成功能不起作用。我在名称字段中输入名称按提交，下次我想重新输入名称时，我需要再次写出来。

我的代码看起来像这样（缩写）：

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

我希望 Autocomplete.On 能为我带来魔力，但它似乎不起作用。也许保存方法的工作方式搞砸了？

方法比较大，我只是简化一下

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

【问题讨论】：

标签： java vaadin vaadin10

【解决方案1】：

发现有人创建了问题https://github.com/vaadin/vaadin-text-field/issues/156

似乎是 Shadow DOM 限制

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

编辑：

对于我的 loginForm 的自动完成，我可以添加

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

【讨论】：

【解决方案2】：

我最近在使用 Vaadin 14 和自定义登录表单时遇到了这个问题。如果 Chrome 可以在 Light DOM 中看到带有名称属性的输入标签，Chrome 只会提供自动填充字段（并保存登录详细信息），但 Vaadin 创建的 TextFields 会将其所有元素隐藏在 Shadow DOM 中。

解决方案是在父级 <vaadin-text-field> 内创建一个带有 <input slot="input"> 的引用，作为 Light DOM 的一部分。所有样式和所有内容仍将在 Shadow DOM 中，但 Chrome 现在可以看到自动完成的输入字段。

Kotlin 代码：

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)

【讨论】：