Element.setText() causes unnecessary updates on client

[Manfred-on-github]

Description of the bug

When java code invokes Element.setText("someText") this always results in dom changes being sent to the browser, even if the text is not changing. While not a bug, it creates unnecessary network traffic and javascript code active, especially if there are many labels etc. on the screen. It is cumbersome for application code to keep track of the current state of each element. For other things like 'setAttribute()' or 'setProperty()', flow already detects that no change happens and therefore does not send updates. So the same logic should be in effect for text nodes in elements.

At the moment, even when nothing changes, the json sent to browser after a roundtrip contains the statements to remove all children of the element, and then again append the (already existing, unmodified) text node to the children list of that element.

Expected behavior

when nothing changes the json returned in a roundtrp should not contain any changes.

Minimal reproducible example

Label lab = new Label();

init() { add(lab); lab.setText("hello"); add(new Button("update", e -> lab.setText("hello"))); }

open this view, press button -> the json returned should not contain any changes related to the dom elements of the label.

Versions

• Vaadin / Flow version: 23
• Java version: any
• OS version: n/a

[mshabarov]

Re-opened, since the initial solution has been reverted. It didn't take into account client-side elements added in the templates (Lit or Polymer): the client-side child elements are not visible on the server-side while the setText is invoked there, and thus the child elements are not removed. See failing test ClearNodeChildrenIT.addTextNode_setTextToContainerWithClientSideNodes_allNodesAreRemoved.

To be reworked.

[Manfred-on-github]

Then I am afraid this goes beyond my capabilities... Just a thought from "outside": whatever strange component is depending on this exact behavior: it might be possible that such component should do the cleanup in its own client side code, and not require server side flow code do use such complicated DOM manipulations for setting text of an arbitrary (even extremely simple) dom element.