Vaadin14中"disableOnClick“按钮的可靠性

Question

我使用的是Vaadin14，为了避免在用户双击按钮时多次发送请求，我在Button实例上调用setDisableOnClick(true)。

对于某些按钮，这是不够的:该按钮仍然可以被单击多次。当在Chrome devtools中检查dom时，我可以看到为这些按钮设置了disableonclick属性：

​

​

我怀疑这是调用事件处理程序的顺序的问题(要禁用的处理程序应该在发送请求的处理程序之前调用)。

我不希望在服务器端设置布尔值来检查操作是否已经执行。是否有其他选项可以在单击后立即可靠地禁用该按钮？

Answer 1

这似乎是一个Vaadin错误。它不起作用的情况是当按钮在关闭然后重新打开的Dialog中时。当你调用setDisableOnClick(true)时，他们正在使用黑客从服务器端添加事件侦听器：

/**
 * Initialize client side disabling so disabled if immediate on click even
 * if server-side handling takes some time.
 */
private void initDisableOnClick() {
    if (!disableOnClickConfigured) {
        getElement().executeJs("var disableEvent = function () {"
                + "if($0.getAttribute('disableOnClick')){"
                + " $0.setAttribute('disabled', 'true');" + "}" + "};"
                + "$0.addEventListener('click', disableEvent)");
        disableOnClickConfigured = true;
    }
}

当按钮被分离并重新附加时，此事件处理程序将消失。

不幸的是，在重新打开对话框后再次调用setDisableOnClick(true)没有任何帮助，因为disableOnClickConfigured已经设置为true，因此将跳过此代码。

我看到了三个选择：

1. 当按钮重新附加(对话框重新打开)时，通过反射将私有字段disableOnClickConfigured重置为false，然后再次调用setDisableOnClick(true)。
2. 复制代码以添加客户端事件侦听器，并在按钮出现问题时执行它，方法是将按钮替换为新按钮，甚至在每次打开按钮时创建一个新的Dialog实例。

< code >G216

这是我选择的最后一个选择。Dialog是一个Spring bean，所以我使用Prototype作用域并用ObjectFactory注入它，然后在调用open之前获得一个新实例。