Vaadin 14、Safari 13：带有输入事件侦听器的文本字段不会触发 ValueChangeListener答案

【问题标题】：Vaadin 14, Safari 13: Textfield with input event listener does not trigger ValueChangeListenerVaadin 14、Safari 13：带有输入事件侦听器的文本字段不会触发 ValueChangeListener
【发布时间】：2020-08-26 11:38:53
【问题描述】：

在 Vaadin 14.3.2 应用程序中，我创建了自己的数字字段来格式化（数字）输入。

因此我创建了一个这样的类：

@Tag("my-number-field")
@JsModule("./js/my-number-field.js")
public class MyNumberField extends TextField {
[...]
}

和 my-number-field.js 中的一些 JavaScript（见下文）进行格式化。这种格式适用于 Chromium、Chrome、Edge、Firefox 以及 Safari 13.1.3。

但是在 Safari 中，发生这种情况时不会在服务器端触发 ValueChangeListener：

inputElement.value = [newValue];

这是我的代码的一些最小的 sn-p，仍然显示行为：

(function() {

customElements.whenDefined('vaadin-text-field').then(() => {
    class MyNumberField extends customElements.get('vaadin-text-field') {

        constructor() {
            super();
        }

        static get is() {
            return 'my-number-field';
        }

        ready() {
            super.ready();
            this.addEventListener('input', this.formatInput, true);
        }
        
        formatInput (event) {
            const inputElement = this.inputElement;
            const originalInputValue = inputElement.value;
            // this is the re-formatting
            inputElement.value=originalInputValue+'0';
        };

    }
    customElements.define(MyNumberField.is, MyNumberField);
});

})();

当我注释 inputElement.value = [newValue]; 行时，服务器端的 ValueChangeListener 会获取输入的值。激活该行后，ValueChangeListener 不会获得输入/新格式化的值。

是否有在 Safari 中触发 ValueChangeListener 的技巧？

【问题讨论】：

标签： javascript vaadin-flow vaadin10

【解决方案1】：

更新（也许是我的情况的解决方案）：将 MyNumberField 的 ValueChangeMode 设置为 ON_BLUR 有效：

public MyNumberField(...) {
    this.setValueChangeMode(ValueChangeMode.ON_BLUR);
}

EAGER 也有效。 LAZY 也有效。并且 TIMEOUT 有效。

只有在 TextField 构造函数中设置为默认值的 ON_CHANGE 不起作用。

【讨论】：