fix: change what debounce is calling

zendesk · Sep 3, 2024 · b3e99f8 · b3e99f8
1 parent 20c808d
commit b3e99f8
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 94 deletions.
diff --git a/assets/new-request-form-bundle.js b/assets/new-request-form-bundle.js
diff --git a/src/modules/new-request-form/fields/LookupField.tsx b/src/modules/new-request-form/fields/LookupField.tsx
@@ -7,7 +7,7 @@ import {
   Option,
   Message,
 } from "@zendeskgarden/react-dropdowns.next";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { Field, FieldOption } from "../data-types";
 import { Span } from "@zendeskgarden/react-typography";
 import SearchIcon from "@zendeskgarden/svg-icons/src/16/search-stroke.svg";
@@ -91,8 +91,54 @@ export function LookupField({
     [customObjectKey]
   );
 
+  const fetchOptions = async (inputValue: string) => {
+    const searchParams = new URLSearchParams();
+    searchParams.set("name", inputValue.toLocaleLowerCase());
+    searchParams.set("source", "zen:ticket");
+    searchParams.set("field_id", fieldId.toString());
+    searchParams.set("requester_id", userId.toString());
+    if (organizationId !== null)
+      searchParams.set("organization_id", organizationId);
+    setIsLoadingOptions(true);
+    try {
+      const response = await fetch(
+        `/api/v2/custom_objects/${customObjectKey}/records/autocomplete?${searchParams.toString()}`
+      );
+
+      const data = await response.json();
+      if (data !== undefined) {
+        setOptions(
+          data.custom_object_records.map(
+            ({ name, id }: { name: string; id: string }) => ({
+              name,
+              value: id,
+            })
+          )
+        );
+      } else {
+        setOptions([]);
+      }
+    } catch (error) {
+      return error;
+    } finally {
+      setIsLoadingOptions(false);
+    }
+    return;
+  };
+
+  const debouncedFetchOptions = useCallback(debounce(fetchOptions, 300), [
+    customObjectKey,
+    userId,
+    organizationId,
+    fieldId,
+  ]);
+
+  useEffect(() => {
+    return () => debouncedFetchOptions.cancel();
+  }, [debouncedFetchOptions]);
+
   const handleChange = useCallback<NonNullable<IComboboxProps["onChange"]>>(
-    async ({ inputValue, selectionValue }) => {
+    ({ inputValue, selectionValue }) => {
       if (selectionValue !== undefined) {
         if (selectionValue == "") {
           setSelectedOption(EMPTY_OPTION);
@@ -106,61 +152,21 @@ export function LookupField({
           if (selectedOption) {
             setInputValue(selectedOption.name);
             setSelectedOption(selectedOption);
-            onChange(selectedOption.value);
             setOptions([selectedOption]);
+            onChange(selectedOption.value);
           }
         }
         return;
       }
 
       if (inputValue !== undefined) {
         setInputValue(inputValue);
-        const searchParams = new URLSearchParams();
-        searchParams.set("name", inputValue.toLocaleLowerCase());
-        searchParams.set("source", "zen:ticket");
-        searchParams.set("field_id", fieldId.toString());
-        searchParams.set("requester_id", userId.toString());
-        if (organizationId !== null)
-          searchParams.set("organization_id", organizationId);
-        setIsLoadingOptions(true);
-        try {
-          const response = await fetch(
-            `/api/v2/custom_objects/${customObjectKey}/records/autocomplete?${searchParams.toString()}`
-          );
-
-          const data = await response.json();
-          if (data !== undefined) {
-            setOptions(
-              data.custom_object_records.map(
-                ({ name, id }: { name: string; id: string }) => ({
-                  name,
-                  value: id,
-                })
-              )
-            );
-          } else {
-            setOptions([]);
-          }
-        } catch (error) {
-          return error;
-        } finally {
-          setIsLoadingOptions(false);
-        }
+        debouncedFetchOptions(inputValue);
       }
-      return;
     },
-    [customObjectKey, userId, organizationId, fieldId, onChange, options]
-  );
-
-  const debounceHandleChange = useMemo(
-    () => debounce(handleChange, 300),
-    [handleChange]
+    [debouncedFetchOptions, onChange, options]
   );
 
-  useEffect(() => {
-    return () => debounceHandleChange.cancel();
-  }, [debounceHandleChange]);
-
   useEffect(() => {
     if (value) {
       fetchSelectedOption(value as string);
@@ -172,12 +178,6 @@ export function LookupField({
     selectedOption && setOptions([selectedOption]);
   };
 
-  const handleKeyDown = useCallback((event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-    }
-  }, []);
-
   return (
     <GardenField>
       <Label>
@@ -199,11 +199,10 @@ export function LookupField({
           `Search ${label.toLowerCase()}`
         )}
         onFocus={onFocus}
-        onChange={debounceHandleChange}
+        onChange={handleChange}
         renderValue={() =>
           selectedOption ? selectedOption?.name : EMPTY_OPTION.name
         }
-        onKeyDown={handleKeyDown}
       >
         {selectedOption?.name !== EMPTY_OPTION.name && (
           <Option value="" label="-">