diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx index 7c5cf4b1..6e8e2bc0 100644 --- a/src/components/TagInput.tsx +++ b/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 <> @@ -263,8 +263,7 @@ export default function TagInput({ {icon} } ; - }, - [options, defaultIcon]); + }, [options, defaultIcon]); return (
removeOption(option)} > - {renderOptionContent(value)} + {renderTag(option)} )} 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)} > - {renderOptionContent(value)} + {renderTag(value)} {annotation && diff --git a/src/film/index.tsx b/src/film/index.tsx index 30426df7..341acfb1 100644 --- a/src/film/index.tsx +++ b/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: , - }, }; 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: , + })) + .sort((a, b) => a.value.localeCompare(b.value)); };