Fix fujifilm simulation input rendering

src/components/TagInput.tsx

@@ -252,8 +252,8 @@ export default function TagInput({
     limit,
   ]);
 
-  const renderOptionContent = useCallback((value: string) => {
-    const option = options.find(option => option.value === value);
+  const renderTag = useCallback((value: string) => {
+    const option = options.find(o => o.value === value);
     const icon = option?.icon ?? defaultIcon;
     return <>
       <span className="truncate">
@@ -263,8 +263,7 @@ export default function TagInput({
         {icon}
       </span>}
     </>;
-  },
-  [options, defaultIcon]);
+  }, [options, defaultIcon]);
 
   return (
     <div
@@ -326,7 +325,7 @@ export default function TagInput({
               )}
               onClick={() => removeOption(option)}
             >
-              {renderOptionContent(value)}
+              {renderTag(option)}
             </span>)}
         <input
           id={id}
@@ -347,6 +346,9 @@ export default function TagInput({
           readOnly={readOnly}
           placeholder={selectedOptions.length === 0 ? placeholder : undefined}
           onFocus={() => setSelectedOptionIndex(undefined)}
+          onClick={() => {
+            if (!shouldShowMenu) { setShouldShowMenu(true); }
+          }}
           aria-autocomplete="list"
           aria-expanded={shouldShowMenu}
           aria-haspopup="true"
@@ -403,7 +405,7 @@ export default function TagInput({
                 onFocus={() => setSelectedOptionIndex(index)}
               >
                 <span className="grow inline-flex items-center gap-2 min-w-0">
-                  {renderOptionContent(value)}
+                  {renderTag(value)}
                 </span>
                 {annotation &&
                   <span

src/film/PhotoFilmIcon.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, useMemo } from 'react';
 import { labelForFilm } from '.';
 
 const INTRINSIC_WIDTH = 28;
-const INTRINSIC_WIDTH_FALLBACK = 16;
+const INTRINSIC_WIDTH_FALLBACK = 14;
 const INTRINSIC_HEIGHT = 16;
 
 const FALLBACK_ICON = <g>

src/film/index.tsx

@@ -104,22 +104,16 @@ export const convertFilmsForForm = (
   _films: Films = [],
   includeAllFujifilmSimulations?: boolean,
 ): AnnotatedTag[] => {
-  const films = includeAllFujifilmSimulations
+  const films: AnnotatedTag[] = includeAllFujifilmSimulations
     ? FUJIFILM_SIMULATION_FORM_INPUT_OPTIONS
-      .map(({ value }) => ({ value } as AnnotatedTag))
+      .map(({ value }) => ({ value }))
     : [];
 
   _films.forEach(({ film, count }) => {
     const index = films.findIndex(f => f.value === film);
-    const fujifilmSimulation = FUJIFILM_SIMULATION_FORM_INPUT_OPTIONS
-      .find(f => f.value === film);
     const meta =  {
       annotation: formatCount(count),
       annotationAria: formatCountDescriptive(count),
-      ...fujifilmSimulation && {
-        label: labelForFilm(film).large,
-        icon: <PhotoFilmIcon film={film} />,
-      },
     };
     if (index === -1) {
       films.push({ value: film, ...meta });
@@ -128,5 +122,11 @@ export const convertFilmsForForm = (
     }
   });
 
-  return films.sort((a, b) => a.value.localeCompare(b.value));
+  return films
+    .map(film => ({
+      ...film,
+      label: labelForFilm(film.value).large,
+      icon: <PhotoFilmIcon film={film.value} />,
+    }))
+    .sort((a, b) => a.value.localeCompare(b.value));
 };