diff --git a/app/components/Combobox.tsx b/app/components/Combobox.tsx index ee88691f2..bd7bfd22c 100644 --- a/app/components/Combobox.tsx +++ b/app/components/Combobox.tsx @@ -33,6 +33,8 @@ const MAX_RESULTS_SHOWN = 6; interface ComboboxBaseOption { label: string; + /** Alternative text other than label to match by */ + alt?: string[]; value: string; imgPath?: string; } @@ -54,7 +56,9 @@ interface ComboboxProps { fuseOptions?: Fuse.IFuseOptions>; } -export function Combobox>({ +export function Combobox< + T extends Record +>({ options, inputName, placeholder, @@ -76,14 +80,14 @@ export function Combobox>({ > | null>(initialValue); const [query, setQuery] = React.useState(""); + const fuse = new Fuse(options, { + ...fuseOptions, + keys: ["label", "alt"], + }); + const filteredOptions = (() => { if (!query) return []; - const fuse = new Fuse(options, { - ...fuseOptions, - keys: [...Object.keys(options[0] ?? {})], - }); - return fuse .search(query) .slice(0, MAX_RESULTS_SHOWN) @@ -230,7 +234,6 @@ export function UserCombobox({ ); } -// TODO: [object Object] flickers when server rendered with initialValue export function WeaponCombobox({ id, required, @@ -256,12 +259,13 @@ export function WeaponCombobox({ weaponIdsToOmit?: Set; value?: MainWeaponId | null; }) { - const { t } = useTranslation("weapons"); + const { t, i18n } = useTranslation("weapons"); const idToWeapon = (id: (typeof mainWeaponIds)[number]) => ({ value: String(id), label: t(`MAIN_${id}`), imgPath: mainWeaponImageUrl(id), + alt: i18n.language !== "en" ? [t(`MAIN_${id}`, { lng: "en" })] : undefined, }); return (