From 1e53dd4fe1e619839c8c97dd467fd8a9a8ecba76 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Wed, 3 Jan 2024 15:23:23 -0800
Subject: [PATCH] Run active edit action synchronously

---
 .../src/hooks/useSingleActiveEditForm.tsx     | 50 ++++++++-----------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/packages/desktop-client/src/hooks/useSingleActiveEditForm.tsx b/packages/desktop-client/src/hooks/useSingleActiveEditForm.tsx
index 662c3c3fcbb..2c9ee7c22ea 100644
--- a/packages/desktop-client/src/hooks/useSingleActiveEditForm.tsx
+++ b/packages/desktop-client/src/hooks/useSingleActiveEditForm.tsx
@@ -8,7 +8,6 @@ import React, {
 } from 'react';
 
 import usePrevious from './usePrevious';
-import useStableCallback from './useStableCallback';
 
 type ActiveEditCleanup = () => void;
 type ActiveEditAction = () => void | ActiveEditCleanup;
@@ -19,7 +18,9 @@ type SingleActiveEditFormContextValue = {
   onRequestActiveEdit: (
     field: string,
     action?: ActiveEditAction,
-    clearActiveEditDelayMs?: number,
+    options?: {
+      clearActiveEditDelayMs?: number;
+    },
   ) => void;
   onClearActiveEdit: (delayMs?: number) => void;
 };
@@ -39,21 +40,14 @@ export function SingleActiveEditFormProvider({
 }: SingleActiveEditFormProviderProps) {
   const [editingField, setEditingField] = useState(null);
   const prevEditingField = usePrevious(editingField);
-  const actionRef = useRef<ActiveEditAction>(null);
   const cleanupRef = useRef<ActiveEditCleanup | void>(null);
 
   useEffect(() => {
     if (prevEditingField != null && prevEditingField !== editingField) {
       runCleanup();
-    } else if (prevEditingField == null && editingField !== null) {
-      runAction();
     }
   }, [editingField]);
 
-  const runAction = () => {
-    cleanupRef.current = actionRef.current?.();
-  };
-
   const runCleanup = () => {
     const editCleanup = cleanupRef.current;
     if (typeof editCleanup === 'function') {
@@ -66,27 +60,25 @@ export function SingleActiveEditFormProvider({
     setTimeout(() => setEditingField(null), delayMs);
   };
 
-  const onRequestActiveEdit = useStableCallback(
-    (
-      field: string,
-      action: ActiveEditAction,
-      options: {
-        clearActiveEditDelayMs?: number;
-      },
-    ) => {
-      if (editingField === field) {
-        // Already active.
-        return;
-      }
-
-      if (editingField) {
-        onClearActiveEdit(options?.clearActiveEditDelayMs);
-      } else {
-        actionRef.current = action;
-        setEditingField(field);
-      }
+  const onRequestActiveEdit = (
+    field: string,
+    action: ActiveEditAction,
+    options: {
+      clearActiveEditDelayMs?: number;
     },
-  );
+  ) => {
+    if (editingField === field) {
+      // Already active.
+      return;
+    }
+
+    if (editingField) {
+      onClearActiveEdit(options?.clearActiveEditDelayMs);
+    } else {
+      cleanupRef.current = action?.();
+      setEditingField(field);
+    }
+  };
 
   return (
     <SingleActiveEditFormContext.Provider