fix: combobox input delete

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

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