1

I am working on a network graph editor with an inspector view on the right side. The inspector is a separate web component built with Lit. When I click on a node I would like to be able to view and change properties of the node, like the node title, in the inspector view. That works well as long as I don't change any value in the input field. Once I changed the value the input field keeps it's manual value even if set a new value during re-rendering.

To provide an example. This is how the web inspector of Safari shows the HTML element: enter image description here

If I now change the node value it looks like this: enter image description here

Now, I change to the second node I get this: enter image description here

As you can see, the value attribute changed, even the id is different. However, Safari (and Chrome), keep the existing value, hence showing me the wrong title for the second node.

The input field shows the node's value each time, as long as I don't change the value manually. After that the input field maintains the manually set value.

The corresponding line in render() is

<input id="text_${this.currentElement.id}" value="${this.currentElement.text}"/>

I specifically change the id but that has no impact on the result.

What do I need to do in order to 'loose' the manual value during re-rendering? Many thanks in advance!

Wizard of Kneup
  • 1,863
  • 1
  • 18
  • 35

1 Answers1

3

You should use .value to bind to value property.

<input id="text_${this.currentElement.id}" .value="${this.currentElement.text}"/>

You could read more on property-expressions.

tpliakas
  • 1,118
  • 1
  • 9
  • 16
  • special thanks for the link to property-expressions! – Wizard of Kneup Aug 03 '22 at 18:05
  • Additionally to set an attribute or property if it differs from the live DOM value rather than the last-rendered value it's sometimes useful to use the [`live` directive](https://lit.dev/docs/templates/directives/#live). – YouCodeThings Oct 18 '22 at 20:20