Bug: Only one selected item is shown in the input while using vscode-multi-select combobox property

[anitbehera]

• Using combobox property in vscode-multi-select
• 2 options are pre-selected (Afghanistan, Albania)
• In the searchbox, only the one option is being displayed.
• Even user de-selects all the options, still the value doesn't disappear.

Expected Behaviour

• None of the selected option should be displayed in the search input OR all the selected options should be displayed

Using vscode-elements - v2.3.0 Sample Code (React + vite) -

import "@vscode-elements/elements/dist/vscode-multi-select";
import "@vscode-elements/elements/dist/vscode-option";

function App() {
  const countries = [
    { name: "Afghanistan", selected: true },
    { name: "Albania", selected: true },
    { name: "Algeria", selected: false },
  ];
  return (
    <>
      <p> Sample vscode-elem</p>
      <vscode-multi-select id="combobox-example" combobox>
        {countries.map((country) => (
          <vscode-option key={country.name} selected={country.selected}>
            {country.name}
          </vscode-option>
        ))}
      </vscode-multi-select>
    </>
  );
}
export default App;

Also, could you please let me know if there's a way to identify whether an option is selected or deselected, and capture its value accordingly.

[bendera]

Thanks for the report!

Also, could you please let me know if there's a way to identify whether an option is selected or deselected, and capture its value accordingly.

You can use the options, the selectedIndexes and the value property. Also "change" and "input" events are dispatched when the selection is changed.

const el = document.querySelector('vscode-multi-select');
console.log(el.options);
console.log(el.selectedIndexes);
console.log(el.value);

[bendera]

Available starting from 2.3.1-pre.2

[anitbehera]

@bendera This issue is fixed, but a new issue has been introduced.

• When user searches and selects an option from the search result, it's not being selected.
• But if user searches only the FIRST option and selects, it works as expected. Doesn't work for other options in the search result.