From b943d3c10241c5a1af33aa29d0ed8336a159df27 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 31 Mar 2025 08:47:37 -0500
Subject: [PATCH] TagInput behaves as dropdown when limit is set to 1

---
 src/components/TagInput.tsx | 28 ++++++++++++++++++++--------
 src/photo/form/index.ts     |  2 --
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx
index b4767d2b..ce2939ab 100644
--- a/src/components/TagInput.tsx
+++ b/src/components/TagInput.tsx
@@ -34,6 +34,8 @@ export default function TagInput({
   limit?: number
   limitValidationMessage?: string
 }) {
+  const behaveAsDropdown = limit === 1;
+
   const containerRef = useRef<HTMLInputElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const optionsRef = useRef<HTMLInputElement>(null);
@@ -51,8 +53,10 @@ export default function TagInput({
   , [value]);
 
   const hasReachedLimit = useMemo(() =>
-    limit !== undefined && selectedOptions.length >= limit
-  , [limit, selectedOptions]);
+    limit !== undefined &&
+    selectedOptions.length >= limit &&
+    !behaveAsDropdown
+  , [limit, behaveAsDropdown, selectedOptions]);
 
   const inputTextFormatted = parameterize(inputText);
   const isInputTextUnique =
@@ -100,21 +104,29 @@ export default function TagInput({
       .filter(option => !selectedOptions.includes(option));
 
     if (optionsToAdd.length > 0) {
-      onChange?.([
-        ...selectedOptions,
-        ...optionsToAdd,
-      ].join(','));
+      if (behaveAsDropdown) {
+        // If behaving as dropdown, replace contents on add
+        onChange?.(optionsToAdd[0]);
+      } else {
+        onChange?.([
+          ...selectedOptions,
+          ...optionsToAdd,
+        ].join(','));
+      }
     }
 
     setSelectedOptionIndex(undefined);
     setInputText('');
 
-    if (limit !== undefined && limit - 1 >= selectedOptions.length) {
+    if (
+      behaveAsDropdown ||
+      (limit !== undefined && limit - 1 >= selectedOptions.length)
+    ) {
       hideMenu(true);
     } else {
       inputRef.current?.focus();
     }
-  }, [limit, selectedOptions, onChange, hideMenu]);
+  }, [limit, behaveAsDropdown, selectedOptions, onChange, hideMenu]);
 
   const removeOption = useCallback((option: string) => {
     onChange?.(selectedOptions.filter(o =>
diff --git a/src/photo/form/index.ts b/src/photo/form/index.ts
index efeb78d7..0b8ca42c 100644
--- a/src/photo/form/index.ts
+++ b/src/photo/form/index.ts
@@ -123,7 +123,6 @@ const FORM_METADATA = (
     note: 'Intended for Fujifilm simulations and analog scans',
     noteShort: 'Fujifilm simulations / analog scans',
     tagOptions: filmOptions,
-    tagOptionsLimitValidationMessage: 'Photos can only have one film',
     tagOptionsLimit: 1,
     shouldNotOverwriteWithNullDataOnSync: true,
   },
@@ -131,7 +130,6 @@ const FORM_METADATA = (
     label: 'recipe title',
     tagOptions: recipeOptions,
     tagOptionsLimit: 1,
-    tagOptionsLimitValidationMessage: 'Photos can only have one recipe',
     spellCheck: false,
     capitalize: false,
     shouldHide: ({ make }) => make !== MAKE_FUJIFILM,