From e571161aca4b34f9b4957ff1c0c76464d3659782 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 3 Feb 2024 13:26:43 -0600
Subject: [PATCH] Add explicit "create new tag" menu option

---
 src/components/CommaSeparatedInput.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/CommaSeparatedInput.tsx b/src/components/CommaSeparatedInput.tsx
index 808cc186..752430bf 100644
--- a/src/components/CommaSeparatedInput.tsx
+++ b/src/components/CommaSeparatedInput.tsx
@@ -18,6 +18,9 @@ export default function CommaSeparatedInput({
   onChange?: (value: string) => void
   options?: string[]
 } & Omit<React.HTMLProps<HTMLInputElement>, 'onChange'>) {
+  const lastTerm = value?.split(',').slice(-1)?.[0].trim();
+  const hasLastTerm = lastTerm && !optionsRaw.includes(lastTerm);
+
   const items = (convertStringToArray(value) ?? [])
     .map(tag => tag.trim())
     .filter(Boolean);
@@ -57,10 +60,16 @@ export default function CommaSeparatedInput({
               />
             </Combobox.Button>}
         </div>
-        {options &&
+        {(options || hasLastTerm) &&
           <Combobox.Options className={clsx(
             'control px-1.5 absolute mt-4 w-full',
           )}>
+            {hasLastTerm &&
+              <Combobox.Option
+                value={lastTerm}
+              >
+                Create {`"${lastTerm}"`}
+              </Combobox.Option>}
             {options.map((tag) => (
               <Combobox.Option
                 key={tag}