From d9689694b4071995caa03262c6a5cb93c9d3fd40 Mon Sep 17 00:00:00 2001
From: William Lam <w.lam@honteam.com>
Date: Sun, 30 Oct 2022 10:34:18 -0400
Subject: [PATCH] UserComboBox only one result if exact discord ID match
 (#1075)

* Passed a FUSE_OPTIONS object to the Fuse() object.
- We can now adjust how "strict" the search is.

* Refactored Combobox to accept an optional fuseOptions object as a prop

* Fixed fuseOptions prop data type & added a default initialized value of {}
- Moved the USER_COMBOBOX_FUSE_OPTIONS outside of the function
---
 app/components/Combobox.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/components/Combobox.tsx b/app/components/Combobox.tsx
index e5dacdfd1..897878175 100644
--- a/app/components/Combobox.tsx
+++ b/app/components/Combobox.tsx
@@ -38,6 +38,7 @@ interface ComboboxProps<T> {
   clearsInputOnFocus?: boolean;
   onChange?: (selectedOption?: ComboboxOption<T>) => void;
   fullWidth?: boolean;
+  fuseOptions?: Fuse.IFuseOptions<ComboboxOption<T>>;
 }
 
 export function Combobox<T extends Record<string, string | null | number>>({
@@ -52,6 +53,7 @@ export function Combobox<T extends Record<string, string | null | number>>({
   id,
   isLoading = false,
   fullWidth = false,
+  fuseOptions = {},
 }: ComboboxProps<T>) {
   const { t } = useTranslation();
 
@@ -72,8 +74,10 @@ export function Combobox<T extends Record<string, string | null | number>>({
     if (!query) return [];
 
     const fuse = new Fuse(options, {
+      ...fuseOptions,
       keys: [...Object.keys(options[0] ?? {})],
     });
+
     return fuse
       .search(query)
       .slice(0, MAX_RESULTS_SHOWN)
@@ -164,6 +168,11 @@ export function Combobox<T extends Record<string, string | null | number>>({
   );
 }
 
+// Reference for Fuse options: https://fusejs.io/api/options.html
+const USER_COMBOBOX_FUSE_OPTIONS = {
+  threshold: 0.42, // Empirically determined value to get an exact match for a Discord ID
+};
+
 export function UserCombobox({
   inputName,
   initialUserId,
@@ -216,6 +225,7 @@ export function UserCombobox({
       className={className}
       id={id}
       required={required}
+      fuseOptions={USER_COMBOBOX_FUSE_OPTIONS}
     />
   );
 }