get combobox selected display

[LefterisKoumis]

I have this simple calcite combobox. I want to capture the selected display,not its value.

It is simple to get the value.

So, if I select the first option how do I capture "One", the text-label value?

https://codepen.io/lkoumis1/pen/mdzvBKv?editors=1111

<link rel="stylesheet" href="https://unpkg.com/@esri/calcite-components/dist/calcite/calcite.css" />
<script src="https://unpkg.com/@esri/calcite-components/dist/calcite/calcite.esm.js" type="module"></script>

<calcite-combobox id="test">
  <calcite-combobox-item value="1" text-label="One"></calcite-combobox-item>
  <calcite-combobox-item selected value="2" text-label="Two"></calcite-combobox-item>
</calcite-combobox>

document
  .getElementById("test").addEventListener("calciteComboboxChange", function (event) {
  console.log(document.getElementById("test").value)
  
})

[KittyHurley · Accepted solution]

@LefterisKoumis Depending on the intent, you can use JavaScript, for instance:

Loop through selected items:

document.getElementById("test").addEventListener("calciteComboboxChange", (evt) => {
    for (item of evt.target.selectedItems) {
      console.log(item.textLabel);
    }
});

Gather the latest selected item:

document.getElementById("test").addEventListener("calciteComboboxChange", (evt) => {
  const selectedItemNumber = evt.target.selectedItems.length - 1;
  console.log(evt.target.selectedItems[selectedItemNumber]?.textLabel);
});