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));
};