From 4ca3c29b5d1dea94d79773cbe2cc76a168ee692d Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Wed, 20 Mar 2024 16:12:51 +0100
Subject: [PATCH] feat: Add comma separator support for LemonInputSelect
 (#21031)

* Add comma sepator

* feat: Alt-click to edit inputselect items (#21032)
---
 ...ect--multiple-select-with-custom--dark.png | Bin 1646 -> 1357 bytes
 ...ct--multiple-select-with-custom--light.png | Bin 1696 -> 1427 bytes
 .../LemonInputSelect.stories.tsx              |  17 +-
 .../LemonInputSelect/LemonInputSelect.tsx     | 145 ++++++++++++------
 4 files changed, 118 insertions(+), 44 deletions(-)

diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--multiple-select-with-custom--dark.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--multiple-select-with-custom--dark.png
index aa1ba92d1702f51e6269e217cc34fde1d097d853..de66482b3ee6e84a942c809cd11d49ae5d6cb709 100644
GIT binary patch
delta 1326
zcmV+}1=0HM49yCVFn<LHNkl<Zc%1Fr>r)d~7{~GNZZ_E@n?xx{QCk7I$VEmJp%jHy
ztM*N2`j2+n={P!0g<1z?EcFWBxr<fH#nC`E+3aq%FM!mMOG7{-ndkE=yL;xGCz<(8
z&YtXv@@3^Ak7dE2PAC+@@AspsDnf`)PbQPWwrxx^iDg;Y^MBgPi&!iQ3ZyKH#Y6(n
z^VaK22vI<as-XEag25oV9v~iH06=9q$e!n6nn`TimLLo93G*@@wr!Iz6L>&076m}n
z^#F>ZkW8ftU84|Ulak3Ks-mFlI%+r^CT-h=u1N@yr?hPo4u?=R&5z?ag|0^kktfG-
z&@>Iz=Tqe#S$~Kf%=0{aJ|FV?lMqEh!Yo9QkT45TBqYp26bT8l5Jf`5EJTsea%htk
zi$*wirYC#sx*1H<WMpiT@rh?k9cmiic6ZWy<yy}DUAlag#l=KE^>4eCntuA_VxdbB
zVpBF1<`w5J_5z?PDkUYmIM#X?&-0j=oW^k+`u@1S-G6loA^t~RVYaMv_I2`Q3SAFS
zTT{iv<TNb*h%JQpxbh0~``*SEFv1~No~E8TeUhJly_CIPS6fYOO%*{s!2Ihs+`K)6
zX(m_oqbLeJCpuV6nB2NEyyjSefS=~ZdiL+DK+}B8%+7On=;50Etu<wSx4u|3!l`e%
zxI6TKmVf33Ud_z%^y&C^d?Z4Ablb837BRvkQ`VZ->gx_tTT{iYJH!0e*Uy``aZdGo
zjnC&>)%IBHVXSm|-5>*W9B(BSi!yNICYSsAab1_T*28(%u4z8@@2lY2z+VjCf1Gze
zLKNDTznP;^gNFJVrly{+dA+{2nwz(Wn3<Ua;D6rGLlTP#G|jiFoneHzHZZv1csB-b
z1K>C=03)N5bf4(RyM9GcxO?vbW^!o@s2&L9-IoxBlvkL4{NWq`s;ZF5c#Kaz<H^YC
z>1j9|A{f+}oqL@<rzi?z%PZe2!P!?)PGdtI7cTXY$!vVToylaV_`ICb(h`hth?3pA
z@PGNXHo;g4vJg92USaP2y&skrx{@g?hXt>VuOF(f!Na4v>Hs676C1Ye?&?7EYfMkS
zV0Lz%@rh@g>}t=sc12NgZY#u2l2@1$Yb-XcW$6#c(v<Hh<K?TF?D>P$2l)HNtL$<A
z^+9w!Kv(B+-o_WQQ}Xv2MwmT&N;!X_7k?|gw4%OuZ~408JMPj{Tn_}Y?IRH*$9E~j
z&ho*Z02>*d;Am?z<>h5Wj4(%98fj{%%ii;{9J+sI<`}yFh|c!bbpw}5S=hEiW#t!y
zLqW>QKBJ|nVcoG436q4Gr1eM>k%+<GigKD8>o-+@d)pD38tQUB7NSr-c$gnO8GmJL
ze2TWCEu8(Xo87y2apmd&uIsL9J2pPW^z)aT=xjsNR!<sS*QNjZAe9I9^ZnUxXlXvg
z<ENwRj;$yPe-7Ru7K?KB^hxUL4l?|3b1T-dSOmie<$Nqep(yQN^>}mh^M$TM2(bla
zrKPgbLWp7^VHToDNSK8v5)x)1ihqQJS%@MbVHToDsIHrlM;wLN!4yTobzM})vDbV+
zLkO`mXqtxOIH;y+67c&AU5^kVPkJDLX(mxED^14p2!-U4L?L#XP$-1!x>%OAv;ejc
zUqAs2!@%$N%RRIZpD<Nb3Hbd>8<ISag@r|UcMD`ZzJRXlgu@{;BeLZU|0hC-4<qAd
kNIN!3Gl^yW_jg_Y0@<a!`nYp{1^@s607*qoM6N<$f-UrxiU0rr

delta 1617
zcmV-X2Cn(d3hoS$Fn<OpNkl<Zc%1Fr|5Mxc9mnyfzW9q|ASI9lFbPc?QobgXd|{!G
zF1uWN?QOT)-TutocDruvx<b-6Uz+kQd<ldmFi1%F{w0MVTb3p5hY&Ar3$Z=#?0E0T
z9d~?W`J<Px-bf!wmU6t|J)b?{a0tUN2m}JCs)`Vz_;{X&<9|3<Rt(#=Q`7aAzf@F|
zg935e=K1a}zVGkXmk^?W6jedjbi&~<p-_<R?HvGA_6pheeJm@6<2X{tLKHFI^Kl%9
zU27K~D6c37Kn;b0D2hTX9xrr8Aw-s9u^6hN5DJA*P17XdIEBt6gve3CaWG8-Ro4R~
zlgUEo5kllBnSV^8>pH5YsWL_u;tl5eKANT>*Pnza5mL-Tln5ziAxeZ4vk)ahidl#f
zA;m02iO@5cC#9mijE}Bf{@L_++~#jz^yf2|_z7Lt`E~EF=(~P1^*Q|MFP|4WmM9`w
z74u7<ecqSz0%b$YO){CJ|La?Yjv<OzPQ`57iTo!KuYV;s_lSe!RLuLSC@<s6huwTP
zFv9z1TQQ9=>l<4Pjf@kE#fjD(<5Jf-0RH%gPnm!8grSjf08Ta>r}5O=n5Kbc#d$b0
z$K0cZw0=j&CuwhOVtI9qq2ckLEk76x(As>OXk87uuCcnd!RYuDmKA$#w)$u-9cNn7
zh6|<<=6{oqukhtp-|&3b`o(q5B=_C1NzS%6<2VlA4UAA%dyK|YC$a4WgTrHNZa&K>
z|JC30@aMn&BcC6cC?R=20j6mxjqkqA;P4pNzPXLAX>^=v0bpr)m2Yo;4||8|W8+f*
zymRsdZLRNdZ|VX6?E999$!S_!PV?@`6RCc6U4J85SHsQQgG}6;{>5cqJl{b@MLD<c
z4DnU}4P4jdTt{2R*)&a~x~eiYe|@x;t!F>(TgaK@)-;tP)ra}|#vL{`x9IJ@h^}e$
zU%ScX<`!q$nlsKX#6fb}Gynd#AEmYDA1yF8aUTFxRT;lG&Cbqq04DE0;8Is70G{U)
zkAJ^-GQz8e>Mc!;d_Q=X)wK-(tXQ1kyA!mxHZeQ*7yw047#*9$itYbZ%{v1l03?$x
z01s#8>HXkh>h*)NxvtCN(hBv_TGltV0Ek9wSa`Cu@A5Lqt*R<h(+`Qo;yj$0r{P3B
zQ`0lJuFK5qBQE!JWt?A#gXC1qeb;WJwSSYYo7Udm-a%0m*gMm$Y1+PhnMRm!IK&5+
z&f|Ii851fBsXkshsF2xvoJ!5Hqf}K@5-|-b-#Ub*r5}78l<mpWB|1CWxH~q9x%d9t
zcZUD#+_Amfp6B6t9`4@X%XQtfe3|4IVm~<*^R5*;@b#Z=%$exFek-++ztT}weSh?J
zUqlb+EG#Utwzk2)<{s12eIes)%PVWBs!Da$VJa&Rv9`YX+LL|x$em4oA@-Bk6JWWp
zVsYZOjbVgYSzS*}kC;YQ4;73=OpY9>;<LZ^VJBV`U~TQutg`sN&(p<a>Z3JORvuz*
ze&K(fJD>T*|F@iu;X<Kc`cE*J@qc^mL;~OUsjWGRuD|$SGX29W=R403tviNkggJVo
zik|KZoO-7r<9_3D8^=k~&`^(QgsHAROnXaH*6a58$s#9?M|tZ|1&fO-2hN+1-1*3V
z;oMnTni?~1i_(<Sp80p5UQKIzo|o|@6WdNOGJ22B_uE)mU1w-`oSE5q+<&A?OY>>U
zA|_TW&f|rr{P18l<4msWa^uzj=Q`VIZEob*kK0T?nBjcqnXJ}reSH(xby-{A#CgpV
zSn`oOANeaP$^bv(wkS=?g|5r~`o>0~a}*8V_xa@GD~wOvXL0G^J+lzSqPnW8@MGp;
zQWi0Z*43aW3d<|2g^nXcR)3_JU(wssh39z;434H<ZW7{6AjSNOFTT89=m<jOOzub!
zqC`kB3sEAZn1v`2s_S|=-F_*AC=QCE;JPkqGU=r5#1cZhd30STnM|TumPIfSD0Chn
zM2<qiAeI$Fwe19+?_(H7p)&~~vSb(ruIpmk_KOo>JKH-bKqL|&5K0Kh7+Q!Trm8Bz
zK!CEc2>5>LVH>Hz^7i%)p->3ZG|(eu@}+noij?PiB$5s>D~4^`sp<a)!SCjrLfL@h
P00000NkvXXu0mjfn?gQj

diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--multiple-select-with-custom--light.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--multiple-select-with-custom--light.png
index bce77b83e7476d8bfbc943c23fe00fe4c0161edb..8fc4d6555b3e86171b926ae628d51e7fc3705f61 100644
GIT binary patch
delta 1396
zcmV-)1&jKi4U-FyFn<M2Nkl<Zc%1Fs%WD&B9LDi)-ei(Y?9{O>McuftwF^BUf>0Y3
zFFO_SR$S;ps4iRx7Tsz802S*(Tv!*n5d}pHf>o&!MFmA%oMMn#(S>??$w}JW?{gMy
z!#Ssor;YW*hTmtEnR)ZR&lH|c7;>>iq9Kb3@pz16GEOFwA%CCGA%yt#C}l@;YIyW2
z+-|+F-!@t1aCj7@>==fL%jw49(8`%t2vI~XmnD@-5{ZnGw{jT9LYORbI6R8W>87@J
zak+B}A!Z@)=OF2Hit6fxs6--;T{)!4Ld-*TwTn?o5s$}FiA0R5iOaMQV*W9zOp?hs
zDwE0Ja=Oc%M}G)WBA3feCX+_x^EtWMCB!`DaA@T7IaIlW2qET%lv#)hA!Qb#LP(i~
zs1Q<SAu5EFS%?bZn9bn9!9hAZI}6)NDQatL@p`?qw6p+_NF=y?`7+0kAD{7jCr_TF
zzP`Sc{Bv$H)7i6U%N<3CS(#OtCv|jm0FcY&`10iocYp8RMJYvdb2GZGbL`l$xy~ts
z_zxwO*)WX4W79N=#bP{v{+#CKW&rGV``jfILd-}>W&XD%OO_A}24Ui5>V*pzICJJq
z;keJ|<K@ejM59rbEn7xwYb!N1HB;uv<#Kd&bx~JWM{8^Av}?s;F&;d4fZy*YnM|^L
z`Eqve-ha)aMT@44o$e*`-}4O)4s!A0MRx7lMNdx;jg5_L-n@A({v<;D@8;wNSRfFf
zy1IJWV?Ljc7cXA0Z{I#noH)VKrAxVV=@RL5ddk>4ckbZvc-XslZ_%}G-n_~1@GyrC
z9iqLx9hb|+?c29Y&YsO?>FevGt*wonJ9m~mkAD#5_QO}^p`jrjKYq;GwQHvw%jfg>
zd_MN?-_ME_D*)KBV+S=gH6)YCe~f+l^eMq$khZoqlq&u|=HS7DSeAv`J^tYkuh+|!
zD_2U+Z&?<5_UyqlO#mX1NXc^vQBEb5`P8XXFi}>e6zkTlW7DQhQ^t*rjS-K>X=rFD
z?0>V_Y<Rt10OIjD0Po+wr?<D4)2C14aC|?K!{Na1_w)JlXM({X-@bh#o6VMT8U>R@
z7Ggdtsm$%|?c+~&I4}&O=nXH+8vlB+d_Mo(`JOy^0>JCnui3C+L(y@TWzp5uMJknI
z&6+hdG&G=T+7Dfsg{TxImAS62Zbsuw(|<(Qbp{3oSh;c~OceXot5>XAwW=`g$dMyN
zqfxG1yGDI|Jxxtb)6N$R2Kn^q6CE8Lg*)ngzrX1EE|&{{Xf#SyRTTguBO|joQz7P$
zpZX3kr4$=CZlt@roBsZO0)YVc?%kuex3^F<08P_qYHDKp_U&B1e!Xbn48y?bbbs>Z
z%^O0Y5FbB&<o^BpMb|e?6Vo*5?(Sw}WQ2F`-tq9^!&#lfjT<+3^ytxyw}mK|pZ<2v
zEnBwG($d1MTemoW{ybm5e&y)Vqd1+;DPz~KU(f2*tGRmhDv3m5%5kUD$>GC?dHeP)
z=gys@r>BRlTelWn+h((I;J^WfhJS|W?Cj*(vuAAEwry7Vhlhs=g+epl7NT5i{U3g}
z8XJBqcMc)M5BM<9Cm*yBqEbkig{TlxW+5tslv#)hA!Qb#LP(i~s1QmiJK1ce+&P30
zCCX+qC}l@!nno&}oWWCs5Wk{SDv72!QM&FS93Cxq9w9`D!jTZV?m_AL0&TEz1Ok7Q
zJChJ%md1N)q3fRUA6o~AgvYQcJ4V$)TrRi#n4A#5s9Y{fDwQA{9>v1KFvh>-r%+~q
zWHL@75htBalh5bMnO6u=gi>}i&56ge0JmE&?EeeNkMc0~n9xB00000<MNUMnLSTYS
CFvXPs

delta 1667
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
N002ovPDHLkV1ixPIZ6Nk

diff --git a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.stories.tsx
index 796d1794b4c89..f7c9212186d1f 100644
--- a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.stories.tsx
@@ -54,9 +54,24 @@ MultipleSelect.args = {
 
 export const MultipleSelectWithCustom: Story = Template.bind({})
 MultipleSelectWithCustom.args = {
-    placeholder: 'Enter any email...',
+    placeholder: 'Pick a url...',
     mode: 'multiple',
     allowCustomValues: true,
+    options: [
+        {
+            key: 'http://posthog.com/docs',
+            label: 'http://posthog.com/docs',
+        },
+        {
+            key: 'http://posthog.com/pricing',
+            label: 'http://posthog.com/pricing',
+        },
+
+        {
+            key: 'http://posthog.com/products',
+            label: 'http://posthog.com/products',
+        },
+    ],
 }
 
 export const Disabled: Story = Template.bind({})
diff --git a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
index 967f18e323753..9e5240a275a68 100644
--- a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx
@@ -1,3 +1,5 @@
+import { Tooltip } from '@posthog/lemon-ui'
+import { useKeyHeld } from 'lib/hooks/useKeyHeld'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 import { LemonSnack } from 'lib/lemon-ui/LemonSnack/LemonSnack'
 import { range } from 'lib/utils'
@@ -49,14 +51,21 @@ export function LemonInputSelect({
     const inputRef = useRef<HTMLInputElement>(null)
     const [selectedIndex, setSelectedIndex] = useState(0)
     const values = value ?? []
+    const altKeyHeld = useKeyHeld('Alt')
+
+    const separateOnComma = allowCustomValues && mode === 'multiple'
 
     const visibleOptions = useMemo(() => {
         const res: LemonInputSelectOption[] = []
         const customValues = [...values]
 
+        // We show the input value if custom values are allowed and it's not in the list
+        if (allowCustomValues && inputValue && !values.includes(inputValue)) {
+            customValues.unshift(inputValue)
+        }
+
         options.forEach((option) => {
             // Remove from the custom values list if it's in the options
-
             if (customValues.includes(option.key)) {
                 customValues.splice(customValues.indexOf(option.key), 1)
             }
@@ -75,14 +84,8 @@ export function LemonInputSelect({
                 res.unshift({ key: value, label: value })
             })
         }
-
-        // Finally we show the input value if custom values are allowed and it's not in the list
-        if (allowCustomValues && inputValue && !values.includes(inputValue)) {
-            res.unshift({ key: inputValue, label: inputValue })
-        }
-
         return res
-    }, [options, inputValue, value])
+    }, [options, inputValue, values])
 
     // Reset the selected index when the visible options change
     useEffect(() => {
@@ -90,33 +93,69 @@ 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)
     }
 
-    const _onActionItem = (item: string): void => {
+    const _removeItem = (item: string): void => {
         let newValues = [...values]
-        if (values.includes(item)) {
-            // Remove the item
-            if (mode === 'single') {
-                newValues = []
-            } else {
-                newValues.splice(values.indexOf(item), 1)
-            }
+        // Remove the item
+        if (mode === 'single') {
+            newValues = []
         } else {
-            // Add the item
-            if (mode === 'single') {
-                newValues = [item]
-            } else {
+            newValues.splice(values.indexOf(item), 1)
+        }
+
+        onChange?.(newValues)
+    }
+
+    const _addItem = (item: string): void => {
+        let newValues = [...values]
+        // Add the item
+        if (mode === 'single') {
+            newValues = [item]
+        } else {
+            if (!newValues.includes(item)) {
                 newValues.push(item)
             }
-
-            setInputValue('')
         }
 
+        setInputValue('')
         onChange?.(newValues)
     }
 
+    const _onActionItem = (item: string): void => {
+        if (altKeyHeld && allowCustomValues) {
+            // In this case we want to remove it if added and set input to it
+            if (values.includes(item)) {
+                _removeItem(item)
+            }
+            setInputValue(item)
+            return
+        }
+
+        if (values.includes(item)) {
+            _removeItem(item)
+        } else {
+            _addItem(item)
+        }
+    }
+
     const _onBlur = (): void => {
         // We need to add a delay as a click could be in the popover or the input wrapper which refocuses
         setTimeout(() => {
@@ -143,8 +182,8 @@ export function LemonInputSelect({
     const _onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
         if (e.key === 'Enter') {
             e.preventDefault()
-
             const itemToAdd = visibleOptions[selectedIndex]?.key
+
             if (itemToAdd) {
                 _onActionItem(visibleOptions[selectedIndex]?.key)
             }
@@ -164,33 +203,51 @@ export function LemonInputSelect({
         }
     }
 
-    // TRICKY: We don't want the popover to affect the snack buttons
-    const prefix = (
-        <PopoverReferenceContext.Provider value={null}>
-            <>
-                {values.map((value) => {
-                    const option = options.find((option) => option.key === value) ?? {
-                        label: value,
-                        labelComponent: null,
-                    }
-                    return (
-                        <>
-                            <LemonSnack title={option?.label} onClose={() => _onActionItem(value)}>
+    const prefix = useMemo(
+        () => (
+            // TRICKY: We don't want the popover to affect the snack buttons
+            <PopoverReferenceContext.Provider value={null}>
+                <>
+                    {values.map((value) => {
+                        const option = options.find((option) => option.key === value) ?? {
+                            label: value,
+                            labelComponent: null,
+                        }
+                        const snack = (
+                            <LemonSnack
+                                title={option?.label}
+                                onClose={() => _onActionItem(value)}
+                                onClick={allowCustomValues ? () => _onActionItem(value) : undefined}
+                            >
                                 {option?.labelComponent ?? option?.label}
                             </LemonSnack>
-                        </>
-                    )
-                })}
-            </>
-        </PopoverReferenceContext.Provider>
+                        )
+                        return allowCustomValues ? (
+                            <Tooltip
+                                title={
+                                    <>
+                                        <KeyboardShortcut option /> + click to edit
+                                    </>
+                                }
+                            >
+                                {snack}
+                            </Tooltip>
+                        ) : (
+                            snack
+                        )
+                    })}
+                </>
+            </PopoverReferenceContext.Provider>
+        ),
+        [values, options, altKeyHeld, allowCustomValues]
     )
 
     return (
         <LemonDropdown
-            closeOnClickInside={false}
-            visible={showPopover}
             sameWidth
+            closeOnClickInside={false}
             actionable
+            visible={showPopover}
             onClickOutside={() => {
                 popoverFocusRef.current = false
                 setShowPopover(false)
@@ -219,7 +276,9 @@ export function LemonInputSelect({
                                         {isHighlighted ? (
                                             <span>
                                                 <KeyboardShortcut enter />{' '}
-                                                {!values.includes(option.key)
+                                                {altKeyHeld && allowCustomValues
+                                                    ? 'edit'
+                                                    : !values.includes(option.key)
                                                     ? mode === 'single'
                                                         ? 'select'
                                                         : 'add'