Question

我在构建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能为我带来魔力，但似乎无法正常工作。也许save方法的工作方式搞砸了？

方法相当大，我只是简化了

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

似乎是Shadow 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中看到具有名称属性的输入标签，则Chrome仅提供自动填充字段（并保存登录详细信息），但Vaadin创建的TextFields的所有元素都隐藏在Shadow DOM中。

解决方案是使用Light DOM的一部分在父<input slot="input">中使用<vaadin-text-field>创建引用。所有样式和所有内容仍将保留在Shadow 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中使用（浏览器）自动完成功能

2 个答案: