From cb4fa5098e4603570ccb0e6ab0570ad1d9dc3d04 Mon Sep 17 00:00:00 2001 From: "Suvarna, Rahul (UIS)" Date: Tue, 10 Mar 2026 14:13:02 +0100 Subject: [PATCH 1/5] fix: fix for typo in the documentation --- packages/components/CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md index b98debd45b..d87c6501dc 100644 --- a/packages/components/CONTRIBUTING.md +++ b/packages/components/CONTRIBUTING.md @@ -92,7 +92,7 @@ We rely a lot on inline docs to communicate to the library users (developers). W - `@slot` decorators appear in the Storybook "SLOTS" section - `@csspart` decorators appear in the Storybook "CSS SHADOW PARTS" section - `@dependency` decorators appear in the Storybook "PROPERTIES" section under "dependencies". -- `@state` decorators appear in the Storybook "PROPERTIES" section. These should generally be be marked with the JSDoc annotation `/** @internal */` so they do not appear in the docs. +- `@state` decorators appear in the Storybook "PROPERTIES" section. These should generally be marked with the JSDoc annotation `/** @internal */` so they do not appear in the docs. - `@event` decorators appear in the Storybook "EVENTS" section ## Testing From d1c63103ac3a8d64406e3680fe47dde232d47e91 Mon Sep 17 00:00:00 2001 From: "Suvarna, Rahul (UIS)" Date: Mon, 16 Mar 2026 15:42:43 +0100 Subject: [PATCH 2/5] fix: pressing tab deletes the text that is not in the option --- .../src/components/combobox/combobox.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts index 7aec2df86e..105e7bbd53 100644 --- a/packages/components/src/components/combobox/combobox.ts +++ b/packages/components/src/components/combobox/combobox.ts @@ -613,6 +613,21 @@ export default class SdCombobox extends SolidElement implements SolidFormControl private handleComboboxKeyDown(event: KeyboardEvent) { if (event.key === 'Tab') { + const inputValue = this.displayInput.value.trim(); + + // Check if inputValue matches any option + const matchedOption = this.getSlottedOptions().some(option => { + const optionLabel = option.getTextLabel().toLowerCase(); + return optionLabel === inputValue.toLowerCase(); + }); + + // If no match, clear the input + if (!matchedOption) { + this.displayInputValue = ''; + // Optionally, you may want to update the input element's value immediately + this.displayInput.value = ''; + } + return; } From 36cf29edd147637b3e3e30cb0d95b6f9f03f3ce0 Mon Sep 17 00:00:00 2001 From: "Suvarna, Rahul (UIS)" Date: Mon, 16 Mar 2026 15:54:54 +0100 Subject: [PATCH 3/5] chore: adding changeset --- .changeset/new-experts-occur.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/new-experts-occur.md diff --git a/.changeset/new-experts-occur.md b/.changeset/new-experts-occur.md new file mode 100644 index 0000000000..e8edcff377 --- /dev/null +++ b/.changeset/new-experts-occur.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/components': minor +--- + +Previously when the user types something in the component `sd-combobox` that is not one of the options, pressing tab would save the "wrong" text in the state. This push fixes that issue. So now when the user types something that is not part of the list/options, pressing tab would delete the text written. From e59c1835ea2fb06ae69a35b63d3bfad8935a9fdc Mon Sep 17 00:00:00 2001 From: Rahul Suvarna <51310328+rahulsuvarna18@users.noreply.github.com> Date: Wed, 18 Mar 2026 13:17:58 +0100 Subject: [PATCH 4/5] Update new-experts-occur.md --- .changeset/new-experts-occur.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/new-experts-occur.md b/.changeset/new-experts-occur.md index e8edcff377..fcf7772b52 100644 --- a/.changeset/new-experts-occur.md +++ b/.changeset/new-experts-occur.md @@ -1,5 +1,5 @@ --- -'@solid-design-system/components': minor +'@solid-design-system/components': patch --- -Previously when the user types something in the component `sd-combobox` that is not one of the options, pressing tab would save the "wrong" text in the state. This push fixes that issue. So now when the user types something that is not part of the list/options, pressing tab would delete the text written. +Fixed `sd-combobox` input value handling when pressing `tab` if there is no matching option in the selection list. From 64f0767c80ccc226f60ccfbb8d48f5d39d80b6bb Mon Sep 17 00:00:00 2001 From: "Suvarna, Rahul (UIS)" Date: Tue, 24 Mar 2026 14:55:10 +0100 Subject: [PATCH 5/5] chore: add test --- .../src/components/combobox/combobox.test.ts | 28 +++++++++++++++++++ .../src/components/combobox/combobox.ts | 18 ++---------- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/combobox/combobox.test.ts b/packages/components/src/components/combobox/combobox.test.ts index 7609d88791..16cb48e348 100644 --- a/packages/components/src/components/combobox/combobox.test.ts +++ b/packages/components/src/components/combobox/combobox.test.ts @@ -1375,4 +1375,32 @@ describe('', () => { expect(tags.textContent).to.equal('4 Optionen ausgewählt'); }); + + it('should clear the input field when pressing Tab key', async () => { + const el = await fixture(html` + + Option 1 + Option 2 + Option 3 + + `); + + const input = el.shadowRoot!.querySelector('[part~="display-input"]')!; + + // Set initial values to simulate user input + el.displayInputValue = 'test value'; + input.value = 'test value'; + await el.updateComplete; + + // Focus the input before sending keys + input.focus(); + + // Send the Tab key press event + await sendKeys({ press: 'Tab' }); + await el.updateComplete; + + // Expect the internal state and input value to be cleared + expect(el.displayInputValue).to.equal(''); + expect(input.value).to.equal(''); + }); }); diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts index 105e7bbd53..72dd113392 100644 --- a/packages/components/src/components/combobox/combobox.ts +++ b/packages/components/src/components/combobox/combobox.ts @@ -613,24 +613,10 @@ export default class SdCombobox extends SolidElement implements SolidFormControl private handleComboboxKeyDown(event: KeyboardEvent) { if (event.key === 'Tab') { - const inputValue = this.displayInput.value.trim(); - - // Check if inputValue matches any option - const matchedOption = this.getSlottedOptions().some(option => { - const optionLabel = option.getTextLabel().toLowerCase(); - return optionLabel === inputValue.toLowerCase(); - }); - - // If no match, clear the input - if (!matchedOption) { - this.displayInputValue = ''; - // Optionally, you may want to update the input element's value immediately - this.displayInput.value = ''; - } - + this.displayInputValue = ''; + this.displayInput.value = ''; return; } - this.handleDocumentKeyDown(event); }