Updating .value on VSCodeTextField does not update text in the field

[alisonlhart]

Currently, updating the VSCodeTextField value attribute doesn't appear to edit the text inside the field, only the "value" element property. This only occurs if the text in the field has been edited.

This may be related to the shadow root where an field is located under a VSCodeTextField element.

For example, say the nameTextField has had "test" entered into it, and then the following executes:

let nameTextField = document.getElementById(
    "test-name",
  ) as VscodeTextfield;
nameTextField.value = "";

The actual text in the field will remain "test", while the input element's value attribute will be set to "".

Accessing the input element directly under the shadow root does permit updating the text inside the field, e.g.:

let inputElement = nameTextField.shadowRoot?.querySelector(
    "#input",
  ) as HTMLInputElement;
inputElement.value = "";

This works to reset the text, but not the value attribute of the input element.

Ideally, both the value attribute and the text in the field itself should be modified by setting .value on the VSCodeTextField itself.

[bendera]

I couldn't reproduce it. Did I miss something?

Screen.Recording.2025-01-30.202949.mp4

[alisonlhart]

Hmm, that's very strange. That is the same pattern we're using, but the text just doesn't clear. Here's what I'm seeing:

VSCodeTextField id="namespace-name", entering the string "test" into the field changes the value attribute, and getting the element by ID returns "test". Using .value to set it to an empty string sets the value attribute="", but the text in the field remains unchanged.

Screencast.from.2025-01-31.10-42-08.webm

[bendera]

You changed the value attribute inside the component on the wrapped <input>, but not on the component itself. Then, you selected the <vscode-textfield> component via getElementById and changed its value to an empty string. However, this didn't trigger a re-render because, from the <vscode-textfield> component's perspective, nothing had changed.

Despite this, the component behaves unexpectedly, in terms of how I had planned it. The value property of a native input differs from the value attribute. The value attribute is the default value of the input, while the property is the actual value of it. So, if a native input contains text (e.g., 'test') and you set its value attribute to 'default text', nothing will happen. The input's actual value will change to 'default text' only when the form is reset.

I thought this could be misleading, so I implemented it in a way that the 'value' in the <vscode-textfield> always represents the actual value, and I created a separate property for the default value. However, in the render function, I mistakenly change the inner input's value attribute instead of the property. I should fix this, although I'm not sure if it will resolve your issue.

[alisonlhart]

@bendera I believe that solution should resolve this, based on the behavior I'm seeing.

[bendera]

Stay tuned, I will publish a pre-release in a few minutes.