diff --git a/CHANGELOG.md b/CHANGELOG.md
index c63e6d961..deaf5cea4 100644
--- 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
new file mode 100644
index 000000000..cb039db82
--- /dev/null
+++ b/dev/vscode-multi-select/open-prop.html
@@ -0,0 +1,33 @@
+
+
+
+
+ VSCode Elements
+ Open by default
+
+
+
+ Lorem
+ Ipsum
+ Dolor
+
+
+
+
+
+
diff --git a/dev/vscode-single-select/open-prop.html b/dev/vscode-single-select/open-prop.html
index 1678ea5ca..0219c64a6 100644
--- a/dev/vscode-single-select/open-prop.html
+++ b/dev/vscode-single-select/open-prop.html
@@ -23,7 +23,8 @@ Open by default
Lorem
- Ipsum
+ Ipsum
+ Dolor
diff --git a/src/includes/vscode-select/vscode-select-base.ts b/src/includes/vscode-select/vscode-select-base.ts
index 23ad6fbc8..b96c0fd6e 100644
--- 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
index 20ca2731f..2a1ff0a22 100644
--- 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`
+ Lorem
+ Ipsum
+ Dolor
+ `
+ );
+
+ expect(sl.shadowRoot?.querySelector('ul.options')).to.be.ok;
+ });
+
+ it('shows selected option when opened by default', async () => {
+ const sl = await fixture(
+ html`
+ Lorem
+ Ipsum
+ Dolor
+ `
+ );
+
+ const op = sl.shadowRoot?.querySelector('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(html`
diff --git a/src/vscode-single-select/vscode-single-select.test.ts b/src/vscode-single-select/vscode-single-select.test.ts
index 460662a64..5ae497b5d 100644
--- 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`
+ Lorem
+ Ipsum
+ Dolor
+ `
+ );
+
+ const op = sl.shadowRoot?.querySelector('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(html`
diff --git a/src/vscode-single-select/vscode-single-select.ts b/src/vscode-single-select/vscode-single-select.ts
index 3e4d883fd..402092af3 100644
--- 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`