Component Value Attribute

[DavidJantz]

It seems that specifying a value (value=) as an attribute of a calcite component such as calcite-input or calcite-select does not make that value immediately retrievable through the calcite element's element.value

https://codepen.io/David-Jantz/pen/QwWprgy

Programmatically, in JS, you could get the calcite element's 'value attribute' via element.getAttribute("value") and subsequently assign the 'value' attribute's value to the element's value with:
element.value = element.getAttribute("value"). However, it's unclear why this step is necessary when components like calcite-input already contain events for updating the element.value when a user types it as an input. If a calcite component allows the developer to specify the "value=" attribute already, then what other purpose would that have than being the desired default element.value? It seems effectively no different than a placeholder.

[KittyHurley · Accepted solution]

Hi @DavidJantz, this is a result of the web component lifecycle, where the components must be rendered, or ready to be accessed. To access the component's property values in JavaScript, you can use the componentOnReady() method.

For instance:

(async () => {
  await customElements.whenDefined("calcite-input");
  const inputExample = await document.getElementById("input-example").componentOnReady();
  console.log(`input value: ${inputExample.value}`);
})();

 Here's a Codepen with the componentOnReady() method and event listeners for the Input and Select components: https://codepen.io/geospatialem/pen/bNGWYjm.