feat: double enter fix to chip input and style improvements

Author: lars-berger

src/components/chip-input.tsx

@@ -40,50 +40,94 @@ export function ChipInput(props: ChipInputProps) {
     'disabled',
   ]);
 
-  const [inputValue, setInputValue] = createSignal('');
+  const [inputRef, setInputRef] = createSignal<HTMLInputElement>();
 
   function onKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter' && inputValue() !== '') {
+    // Get value directly from input element.
+    const inputValue = inputRef()?.value;
+
+    // Add a chip when enter or comma is pressed.
+    if (event.key === 'Enter' || event.key === ',') {
       event.preventDefault();
-      addChip(inputValue());
-      setInputValue('');
+
+      const trimmed = inputValue?.trim();
+
+      if (trimmed) {
+        addChip(trimmed);
+        inputRef()!.value = '';
+        return;
+      }
+    }
+
+    // Remove the last chip when backspace is pressed.
+    if (event.key === 'Backspace' && !inputValue && props.value?.length) {
+      removeChip(props.value[props.value.length - 1]!);
     }
   }
 
   function addChip(chip: string) {
-    props.onChange?.([...(props.value ?? []), chip]);
+    // Prevent adding duplicate chips.
+    if (!props.value?.includes(chip)) {
+      props.onChange?.([...(props.value ?? []), chip]);
+    }
   }
 
   function removeChip(chip: string) {
     props.onChange?.(props.value?.filter(t => t !== chip) ?? []);
   }
 
+  // Handle paste to add multiple chips at once.
+  function onPaste(event: ClipboardEvent) {
+    event.preventDefault();
+
+    const pasteData = event.clipboardData?.getData('text');
+    const pastedChips = (pasteData?.split(/,|\n/) ?? [])
+      .map(item => item.trim())
+      .filter(Boolean);
+
+    const newChips = [...(props.value ?? [])];
+    pastedChips.forEach(chip => {
+      if (!newChips.includes(chip)) {
+        newChips.push(chip);
+      }
+    });
+
+    props.onChange?.(newChips);
+  }
+
   return (
-    <div {...rest}>
-      <TextInput
-        disabled={props.disabled}
-        onBlur={() => props.onBlur?.()}
-        onKeyDown={onKeyDown}
-        onChange={setInputValue}
-        placeholder={props.placeholder}
-        value={inputValue()}
-      />
-
-      <Show when={props.value?.length}>
-        <div class="flex flex-wrap gap-2 mt-2">
+    <div {...rest} class="w-full">
+      <div
+        onClick={() => inputRef()?.focus()}
+        class="flex flex-wrap items-center gap-2 p-2 border border-gray-300 rounded-md focus-within:ring-2 focus-within:ring-primary-500 focus-within:border-primary-500 min-h-12"
+      >
+        <Show when={props.value?.length}>
           {props.value?.map(chip => (
-            <Badge variant="secondary">
+            <Badge
+              variant="secondary"
+              class="flex items-center gap-1 px-2 py-1"
+            >
               {chip}
               {!props.disabled && (
                 <IconX
                   onClick={() => removeChip(chip)}
-                  class="ml-1 h-3 w-3 cursor-pointer"
+                  class="h-3 w-3 cursor-pointer"
                 />
               )}
             </Badge>
           ))}
-        </div>
-      </Show>
+        </Show>
+
+        <TextInput
+          ref={setInputRef}
+          disabled={props.disabled}
+          onBlur={() => props.onBlur?.()}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          placeholder={props.value?.length ? '' : props.placeholder}
+          class="flex-grow !border-0 !ring-0 !shadow-none !p-0 min-w-20"
+        />
+      </div>
     </div>
   );
 }