vscode-elements / elements

Web component library for developing Visual Studio Code extensions
https://vscode-elements.github.io
MIT License
156 stars 27 forks source link

First Multi-Select Option Set Bug #219

Closed rroessler closed 2 weeks ago

rroessler commented 2 weeks ago

Due to the initial option having an index of 0 for the _valueOptionIndexMap, a conversion check would fail. This resulted in selected values not being correctly updated. This fix checks for a number instead of truthiness to allow setting multi-select values programmatically.

bendera commented 2 weeks ago

Thanks for the PR. How can this bug be reproduced?

rroessler commented 2 weeks ago

Simply by assigning through the value property as below:

<!DOCTYPE html>

<html>

<head>
    <script src="node_modules/@vscode-elements/elements/dist/bundled.js" type="module"></script>
</head>

<body>
    <vscode-multi-select id="my-select">
        <vscode-option value="A">A</vscode-option>
        <vscode-option value="B">B</vscode-option>
        <vscode-option value="C">C</vscode-option>
    </vscode-multi-select>

    <script type="module">
        // wait for the page to be ready
        await new Promise(resolve => setTimeout(resolve, 0));

        const select = document.getElementById('my-select');
        console.log(select.value.slice()); // show initially empty
        select.value = ['A', 'B', 'C']; // fill with all values
        console.log(select.value.slice()); // show all set now
    </script>
</body>

</html>

If this snippet is run, we will see an empty array, then a full array of all the values. However visually the multi-select will not have the "A" value selected.