From a24176466139c9da723769471b01abcb1e4f2455 Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Wed, 20 Mar 2024 09:29:16 +0100
Subject: [PATCH] Add comma sepator

---
 .../LemonInputSelect/LemonInputSelect.tsx       | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
index 967f18e323753..44eb5c0e5dd18 100644
--- a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
@@ -50,6 +50,8 @@ export function LemonInputSelect({
     const [selectedIndex, setSelectedIndex] = useState(0)
     const values = value ?? []
 
+    const separateOnComma = allowCustomValues && mode === 'multiple'
+
     const visibleOptions = useMemo(() => {
         const res: LemonInputSelectOption[] = []
         const customValues = [...values]
@@ -90,6 +92,21 @@ export function LemonInputSelect({
     }, [visibleOptions.length])
 
     const setInputValue = (newValue: string): void => {
+        // Special case for multiple mode with custom values
+        if (separateOnComma && newValue.includes(',')) {
+            const newValues = [...values]
+
+            newValue.split(',').forEach((value) => {
+                const trimmedValue = value.trim()
+                if (trimmedValue && !values.includes(trimmedValue)) {
+                    newValues.push(trimmedValue)
+                }
+            })
+
+            onChange?.(newValues)
+            newValue = ''
+        }
+
         _setInputValue(newValue)
         onInputChange?.(inputValue)
     }