如何使用（浏览器）自动完成 Vaadin 10 TextField

Question

我尝试使用 vaadin 10 构建预订表单，但在构建时遇到了问题，即我们从网络上的每个表单中了解到的自动完成功能无法正常工作。我在名称字段中输入了名称，然后按下提交，下次我想重新输入名称时，我需要再次写出来。

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

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
}

Answer 1

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

似乎是影子 DOM 限制

相关问题：

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

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

Answer 2

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

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

科特林代码：

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)

如何使用（浏览器）自动完成 Vaadin 10 TextField

How to use (browser)autocomplete with Vaadin 10 TextField

java

vaadin

vaadin10