From 5d844db49d7ea705973543051ffb72e68e01285e Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 24 Aug 2023 22:20:34 +0300
Subject: [PATCH] Allow searching by English weapon names always Closes #1467

---
 app/components/Combobox.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

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<T> {
   fuseOptions?: Fuse.IFuseOptions<ComboboxOption<T>>;
 }
 
-export function Combobox<T extends Record<string, string | null | number>>({
+export function Combobox<
+  T extends Record<string, string | string[] | null | undefined | number>
+>({
   options,
   inputName,
   placeholder,
@@ -76,14 +80,14 @@ export function Combobox<T extends Record<string, string | null | number>>({
   > | 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<MainWeaponId>;
   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 (