From 12a2f929f849c50d588eb2629c5de2bff6658736 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Wed, 31 Jul 2024 02:26:30 +0000
Subject: [PATCH] fix(component): stop renaming modal propagation & input auto
 focus (#7653)

close AF-1125
---
 .../component/src/components/rename-modal/index.tsx         | 1 +
 packages/frontend/component/src/ui/input/input.tsx          | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/component/src/components/rename-modal/index.tsx b/packages/frontend/component/src/components/rename-modal/index.tsx
index befb76f959..d1a46efac4 100644
--- a/packages/frontend/component/src/components/rename-modal/index.tsx
+++ b/packages/frontend/component/src/components/rename-modal/index.tsx
@@ -44,6 +44,7 @@ export const RenameModal = ({
         side: 'left',
         onPointerDownOutside: handleRename,
         sideOffset: -12,
+        onClick: e => e.stopPropagation(),
       }}
       items={
         <Input
diff --git a/packages/frontend/component/src/ui/input/input.tsx b/packages/frontend/component/src/ui/input/input.tsx
index 5ba0a206de..9e49c02bec 100644
--- a/packages/frontend/component/src/ui/input/input.tsx
+++ b/packages/frontend/component/src/ui/input/input.tsx
@@ -58,7 +58,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   const inputRef = useRef<HTMLInputElement | null>(null);
   useLayoutEffect(() => {
     if (inputRef.current && (autoFocus || autoSelect)) {
-      inputRef.current?.focus();
+      // to avoid clicking on something focusable(e.g MenuItem),
+      // then the input will not be focused
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
       if (autoSelect) {
         inputRef.current?.select();
       }