fix(frontend): fix edit test name behavior (#3570)

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);

web/src/hooks/useInputActions.ts

@@ -1,35 +1,30 @@
-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);
       }
 
       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;