Rework fix

src/ComboBox/ComboBox.svelte

@@ -175,11 +175,18 @@
       filteredItems = [];
       if (!selectedItem) {
         selectedId = undefined;
+        // Only reset value if the input is not focused
+        if (!ref.contains(document.activeElement)) {
+          value = "";
+        }
         highlightedIndex = -1;
         highlightedId = undefined;
       } else {
-        // programmatically set value
+        // Only set value if the input is not focused
-        value = itemToString(selectedItem);
+        if (!ref.contains(document.activeElement)) {
+          // programmatically set value
+          value = itemToString(selectedItem);
+        }
       }
     }
   });
@@ -282,13 +289,7 @@
             open = true;
           }
         }}
-        on:keydown={(e) => {
+        on:keydown
-          // If there's a selection and user types a printable character, clear selection immediately
-          if (e.key.length === 1 && selectedItem) {
-            selectedId = undefined;
-            selectedItem = undefined;
-          }
-        }}
         on:keydown|stopPropagation={(e) => {
           const { key } = e;
           if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {

tests/ComboBox/ComboBox.test.ts

@@ -127,6 +127,24 @@ describe("ComboBox", () => {
     const options = screen.getAllByRole("option");
     expect(options).toHaveLength(1);
     expect(options[0]).toHaveTextContent("Email");
+
+    await user.clear(input);
+    expect(input).toHaveValue("");
+    expect(screen.getAllByRole("option")).toHaveLength(3);
+
+    await user.click(document.body);
+    expect(input).not.toHaveFocus();
+
+    await user.keyboard("{Tab}");
+    expect(input).toHaveFocus();
+
+    await user.type(input, "a");
+    await user.click(screen.getAllByRole("option")[1]);
+    expect(input).toHaveValue("Email");
+    
+    await user.click(document.body);
+    expect(input).not.toHaveFocus();
+    expect(screen.queryByRole("option")).not.toBeInTheDocument();
   });
 
   it("should handle disabled items", async () => {