From dec06090e469b807b2efd9f7b8e36360c5385888 Mon Sep 17 00:00:00 2001 From: Dylan Martin Date: Mon, 12 Aug 2024 05:20:20 -0400 Subject: [PATCH] feat(flags): improve the LemonInputSelect component so that new elements being added appear at the top of the list, not the bottom (#24301) Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> --- .../lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx index d24a66c01da..20fabc37881 100644 --- a/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx +++ b/frontend/src/lib/lemon-ui/LemonInputSelect/LemonInputSelect.tsx @@ -77,7 +77,7 @@ export function LemonInputSelect({ // 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.replace('\\,', ',')) // Transform escaped commas to plain commas + res.push({ key: inputValue.replace('\\,', ','), label: inputValue.replace('\\,', ',') }) // Transform escaped commas to plain commas } options.forEach((option) => { @@ -94,13 +94,14 @@ export function LemonInputSelect({ res.push(option) }) - // Custom values are always shown before the list + // Custom values are now added after the input value but before other options if (customValues.length) { customValues.forEach((value) => { - res.unshift({ key: value, label: value }) + if (value !== inputValue) { + res.splice(1, 0, { key: value, label: value }) + } }) } - // :HACKY: This is a quick fix to make the select dropdown work for large values, // as it was getting slow when we'd load more than ~10k entries. Ideally we'd // make this a virtualized list.