Vaadin 12: Setting innerHTML 2x to the same value does not work

134 views Asked by At

is this expected behavior?

Clicking 2x on the "set to 'foo'"-Button will cause the innerHTML to become empty.

import java.util.Random;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.Route;

@Route("test2")
public class V_Test2 extends Div
{
  public V_Test2()
  {
    Div div = new Div();
    add(div);
    {
      Button button = new Button("set to 'foo'");
      button.addClickListener(e -> div.getElement().setProperty("innerHTML", "foo"));
      add(button);
    }
    {
      Button button = new Button("set random");
      button.addClickListener(e -> div.getElement().setProperty("innerHTML", "bar-" + new Random().nextInt()));
      add(button);
    }
    {
      Button button = new Button("set to null");
      button.addClickListener(e -> div.getElement().setProperty("innerHTML", null));
      add(button);
    }
  }
}
1

There are 1 answers

0
Leif Åstrand On BEST ANSWER

This is a known bug: https://github.com/vaadin/flow/issues/4644. You can bypass the broken logic by instead using JavaScript to set the innerHMTL value. This would be something along the lines of div.getElement().executeJavaScript("this.innerHTML = $0", "foo");.