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

Question

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

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

@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];

这是我的代码的一些最小片段，它仍然显示了行为：

(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 不会获得 entered/newly 格式的值。

有没有在 Safari 中也触发 ValueChangeListener 的技巧？

Answer 1

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

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

EAGER 也有效。 LAZY 也有效。超时有效。

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

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

Vaadin 14, Safari 13: Textfield with input event listener does not trigger ValueChangeListener

javascript

vaadin10

vaadin-flow