Bug when setting innerHTML property

While setting innerHTML property, the framework removes all other children from the Element node. This is required, but it has got a side effect. Assuming that we have:

Div div = new Div();
div.setProperty("innerHTML", "<p>Test</p>");

This works. After this is already displayed on the client, somewhere else in the code if we are setting the same value again, the text will disappear from the client side. This is because the children are removed by the setProperty method when the property name is innerHTML but the value change is not communicated to the client (probably because the value is the same).

I’m just linking opened issue related to this bug: [github]
(https://github.com/vaadin/flow/issues/4644)

Current workaround (provided by Legioth) is to use getElement().executeJavaScript("this.innerHTML = $0", "foo"); for setting innerHTML, and it seems to works just fine. Generated uidl message even seems to be smaller then when using getElement().setProperty("innerHTML", "foo");.

The workaround looks good. Thanks.