Vaadin 23: addPropertyChangeListener for JavaScript changes

Question

Intended: In a Vaadin 23 application I'd like to get informed when the value of an HTML attribute is changed.

What I tried: I created this input formula:

    // 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);

What does work: When the user types "something" into the input field then the server prints "something" to the console. This is intended and observed. OK.

What does NOT work: When the user pushes the button then the content of the input field is "hello" (OK). But the PropertyChangeListener does not fire an event, so the server does not print anything to the console.

Question: Is there a way to get the PropertyChangeListener fire an event, even if the attribute's value has been changed by JavaScript?

You're mixing two things here: properties and attributes. Try `console.log(document.getElementById('myInputField'))` and you'll see that there will be a property and an attribute named equally at the same time, maybe with different values. Instead of `.setAttribute('value','hello')` maybe you should try `.value='hello'`. — S. Doe, May 08 '22 at 17:10
You're right: there is an attribute and a property with the same name. Values can differ. But the PropertyChangeListener doesn't fire nevertheless. — , May 08 '22 at 18:12

score 1 · Accepted Answer · answered May 09 '22 at 04:33

I see two problems here.

First, the server-side property change listener in Vaadin Flow needs to be triggered by a client-side event. The <input> element fires events when the the user directly changes the value in the field, but not when the value is changed programmatically. If you change the value from code, then you need to also manually fire an event to trigger the update.

Second, as pointed out in the comments, you should change the property rather than the attribute. In most cases, the attribute and the property with the same name are kept in sync, but the value of an input is an exception. Here, the attribute is the initial value and the property is the actual value. The stay the same if you only change the attribute, but diverge after the user edits through the UI or if the property is changed.

You're right in both aspects. I corrected them and now it works. Working code see below: https://stackoverflow.com/a/72170533/14972917 — , May 09 '22 at 10:30

Vaadin 23: addPropertyChangeListener for JavaScript changes

1 Answers1