vscode-elements · bendera · Jan 22, 2025 · Jan 20, 2025 · Jan 22, 2025 · Jan 22, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### Fixed
 
 - **Table**: The empty component threw an error when it was deleted from the document.
+- **SingleSelect**, **MultiSelect**: Fix selected state when opened by default.
 
 ### Added
 

diff --git a/dev/vscode-multi-select/open-prop.html b/dev/vscode-multi-select/open-prop.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VSCode Elements</title>
+  <link rel="stylesheet" href="/node_modules/@vscode/codicons/dist/codicon.css" id="vscode-codicon-stylesheet">
+  <script type="module" src="/node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
+  <script type="module" src="/dist/main.js"></script>
+  <script>
+    const logEvents = (selector, eventType) => {
+      document.querySelector(selector).addEventListener(eventType, (ev) => {
+        console.log(ev);
+      });
+    };
+  </script>
+</head>
+
+<body>
+  <h1>Open by default</h1>
+  <main>
+    <vscode-demo>
+      <vscode-multi-select  open>
+        <vscode-option>Lorem</vscode-option>
+        <vscode-option selected>Ipsum</vscode-option>
+        <vscode-option selected>Dolor</vscode-option>
+      </vscode-multi-select>
+    </vscode-demo>
+  </main>
+</body>
+
+</html>
diff --git a/dev/vscode-single-select/open-prop.html b/dev/vscode-single-select/open-prop.html
@@ -23,7 +23,8 @@ <h1>Open by default</h1>
     <vscode-demo>
       <vscode-single-select open>
         <vscode-option>Lorem</vscode-option>
-        <vscode-option>Ipsum</vscode-option>
+        <vscode-option selected>Ipsum</vscode-option>
+        <vscode-option>Dolor</vscode-option>
       </vscode-single-select>
     </vscode-demo>
   </main>

diff --git a/src/includes/vscode-select/vscode-select-base.ts b/src/includes/vscode-select/vscode-select-base.ts
@@ -231,7 +231,7 @@ export class VscodeSelectBase extends VscElement {
     const values: string[] = [];
     this._valueOptionIndexMap = {};
 
-    optionElements.forEach((el) => {
+    optionElements.forEach((el, i) => {
       const {innerText, description, disabled} = el;
       const value = typeof el.value === 'string' ? el.value : innerText.trim();
       const selected = el.selected ?? false;
@@ -246,6 +246,10 @@ export class VscodeSelectBase extends VscElement {
 
       nextIndex = options.push(op);
 
+      if (selected && !this._multiple) {
+        this._activeIndex = i;
+      }
+
       if (selected) {
         selectedIndexes.push(options.length - 1);
         values.push(value);

diff --git a/src/vscode-multi-select/vscode-multi-select.test.ts b/src/vscode-multi-select/vscode-multi-select.test.ts
@@ -272,6 +272,36 @@ describe('vscode-multi-select', () => {
     expect(el.value).to.eql(['dolor']);
   });
 
+  it('open by default', async () => {
+    const sl = await fixture(
+      html`<vscode-multi-select open>
+        <vscode-option>Lorem</vscode-option>
+        <vscode-option>Ipsum</vscode-option>
+        <vscode-option>Dolor</vscode-option>
+      </vscode-multi-select>`
+    );
+
+    expect(sl.shadowRoot?.querySelector('ul.options')).to.be.ok;
+  });
+
+  it('shows selected option when opened by default', async () => {
+    const sl = await fixture(
+      html`<vscode-multi-select open>
+        <vscode-option>Lorem</vscode-option>
+        <vscode-option selected>Ipsum</vscode-option>
+        <vscode-option>Dolor</vscode-option>
+      </vscode-multi-select>`
+    );
+
+    const op = sl.shadowRoot?.querySelector<HTMLLIElement>('ul.options li:nth-child(2)');
+
+    expect(op).lightDom.to.eq(`
+      <span class="checkbox-icon checked"></span>
+      <span class="option-label">Ipsum</span>
+    `);
+    expect(op?.classList.contains('selected')).to.be.true;
+  });
+
   it('changes the description of an option in an existing select', async () => {
     const el = await fixture<VscodeMultiSelect>(html`
       <vscode-multi-select>

diff --git a/src/vscode-single-select/vscode-single-select.test.ts b/src/vscode-single-select/vscode-single-select.test.ts
@@ -925,6 +925,21 @@ describe('vscode-single-select', () => {
     expect(sl.shadowRoot?.querySelector('ul.options')).to.be.ok;
   });
 
+  it('shows selected option when opened by default', async () => {
+    const sl = await fixture(
+      html`<vscode-single-select open>
+        <vscode-option>Lorem</vscode-option>
+        <vscode-option selected>Ipsum</vscode-option>
+        <vscode-option>Dolor</vscode-option>
+      </vscode-single-select>`
+    );
+
+    const op = sl.shadowRoot?.querySelector<HTMLLIElement>('ul.options li:nth-child(2)');
+
+    expect(op).lightDom.to.eq('Ipsum');
+    expect(op?.classList.contains('selected')).to.be.true;
+  });
+
   it('changes the description of an option in an existing select', async () => {
     const el = await fixture<VscodeSingleSelect>(html`
       <vscode-single-select>

diff --git a/src/vscode-single-select/vscode-single-select.ts b/src/vscode-single-select/vscode-single-select.ts
@@ -340,8 +340,9 @@ export class VscodeSingleSelect
     const options = list.map((op, index) => {
       const classes = classMap({
         option: true,
-        active: index === this._activeIndex && !op.disabled,
         disabled: op.disabled,
+        selected: op.selected,
+        active: index === this._activeIndex && !op.disabled,
       });
 
       return html`