Vaadin 23: addPropertyChangeListener для изменений JavaScript

Question

Предназначено : в приложении Vaadin 23 я хотел бы получать информацию об изменении значения атрибута HTML.

Что я пробовал : я создал эту формулу ввода:

          // Text input field
    Input input = new Input();
    input.setId("myInputField");
    Element textInput = input.getElement();
    
    // Change listener for property "value"
    // Works well for manual input
    // BUT doesn't work for JavaScript changes
    textInput.addPropertyChangeListener("value", "change", 
        e -> {System.out.println(e.getValue());}
    );
    
    // Button that changes the value of attribute "value"
    Button button = new Button("Change value");
    button.addClickListener(e -> {UI.getCurrent().getPage().executeJs(
        "document.getElementById('myInputField').setAttribute('value','hello');"
    );});

    this.add(input, button);

Что работает : когда пользователь вводит «что-то» в поле ввода, сервер выводит «что-то» на консоль. Это задумано и соблюдается. ХОРОШО.

Что НЕ работает : когда пользователь нажимает кнопку, содержимое поля ввода «привет» (ОК). Но PropertyChangeListener не запускает событие, поэтому сервер ничего не выводит на консоль.

Вопрос : Есть ли способ заставить PropertyChangeListener запустить событие, даже если значение атрибута было изменено с помощью JavaScript?

Answer 1

Я вижу здесь две проблемы.

Во-первых, слушатель изменения свойства на стороне сервера в Vaadin Flow должен запускаться событием на стороне клиента. В элемент запускает события, когда пользователь напрямую изменяет значение в поле, но не когда значение изменяется программно. Если вы измените значение из кода, вам также необходимо вручную запустить событие, чтобы вызвать обновление.

Во-вторых, как указано в комментариях, вы должны изменить свойство, а не атрибут. В большинстве случаев атрибут и свойство с одинаковым именем синхронизируются, но значение ввода является исключением. Здесь атрибут является начальным значением, а свойство — фактическим значением. Остаются неизменными, если вы меняете только атрибут, но расходятся после того, как пользователь редактирует через пользовательский интерфейс или если свойство изменено.