From edfebce3cb9bb38823713b91bb2f11548863703d Mon Sep 17 00:00:00 2001
From: Jorge Padilla <jorge.esteban.padilla@gmail.com>
Date: Fri, 26 Jan 2024 13:30:57 -0500
Subject: [PATCH] fix(frontend): fix edit test name behavior (#3570)

---
 web/src/components/Inputs/Overlay/Overlay.tsx |  9 ++++--
 web/src/hooks/useInputActions.ts              | 31 ++++++++-----------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/web/src/components/Inputs/Overlay/Overlay.tsx b/web/src/components/Inputs/Overlay/Overlay.tsx
index a19305fda4..0d44c713db 100644
--- a/web/src/components/Inputs/Overlay/Overlay.tsx
+++ b/web/src/components/Inputs/Overlay/Overlay.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {Input} from 'antd';
 import useInputActions from 'hooks/useInputActions';
 import {noop} from 'lodash';
@@ -14,14 +14,17 @@ const Overlay = ({onChange = noop, value = '', isDisabled = false}: IProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState(value);
   const ref = useRef(null);
-  useInputActions(ref, () => {
+
+  const handler = useCallback(() => {
     setIsOpen(false);
     if (inputValue) {
       onChange(inputValue);
     } else {
       setInputValue(value);
     }
-  });
+  }, [inputValue, onChange, value]);
+
+  useInputActions(ref, handler);
 
   useEffect(() => {
     setInputValue(value);
diff --git a/web/src/hooks/useInputActions.ts b/web/src/hooks/useInputActions.ts
index 7768b04b95..716cdf217c 100644
--- a/web/src/hooks/useInputActions.ts
+++ b/web/src/hooks/useInputActions.ts
@@ -1,13 +1,16 @@
-import {RefObject, useCallback, useEffect} from 'react';
+import {RefObject, useEffect} from 'react';
 import useOnClickOutside from './useOnClickOutside';
 
 type Handler = (event: MouseEvent | KeyboardEvent) => void;
 
 const useInputActions = <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler) => {
-  useOnClickOutside(ref, handler);
+  useOnClickOutside(ref, handler, 'mousedown');
 
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         handler(event);
       }
@@ -15,21 +18,13 @@ const useInputActions = <T extends HTMLElement = HTMLElement>(ref: RefObject<T>,
       if (event.key === 'Enter') {
         handler(event);
       }
-    },
-    [handler]
-  );
-
-  useEffect(() => {
-    const element = ref.current;
-
-    if (element) {
-      element.addEventListener('keydown', handleKeyDown);
+    };
 
-      return () => {
-        element.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [handleKeyDown, ref]);
+    element.addEventListener('keydown', handleKeyDown);
+    return () => {
+      element.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handler, ref]);
 };
 
 export default useInputActions;