diff --git a/.changeset/new-experts-occur.md b/.changeset/new-experts-occur.md new file mode 100644 index 0000000000..fcf7772b52 --- /dev/null +++ b/.changeset/new-experts-occur.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/components': patch +--- + +Fixed `sd-combobox` input value handling when pressing `tab` if there is no matching option in the selection list. 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 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 7aec2df86e..72dd113392 100644 --- a/packages/components/src/components/combobox/combobox.ts +++ b/packages/components/src/components/combobox/combobox.ts @@ -613,9 +613,10 @@ export default class SdCombobox extends SolidElement implements SolidFormControl private handleComboboxKeyDown(event: KeyboardEvent) { if (event.key === 'Tab') { + this.displayInputValue = ''; + this.displayInput.value = ''; return; } - this.handleDocumentKeyDown(event); }