fix: combobox input delete

.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.

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

packages/components/src/components/combobox/combobox.test.ts

@@ -1375,4 +1375,32 @@ describe('<sd-combobox>', () => {
 
     expect(tags.textContent).to.equal('4 Optionen ausgewählt');
   });
+
+  it('should clear the input field when pressing Tab key', async () => {
+    const el = await fixture<SdCombobox>(html`
+      <sd-combobox>
+        <sd-option value="option-1">Option 1</sd-option>
+        <sd-option value="option-2">Option 2</sd-option>
+        <sd-option value="option-3">Option 3</sd-option>
+      </sd-combobox>
+    `);
+
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('[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('');
+  });
 });

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);
   }