diff --git a/packages/frontend/component/src/components/rename-modal/index.tsx b/packages/frontend/component/src/components/rename-modal/index.tsx
index befb76f95..d1a46efac 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 5ba0a206d..9e49c02be 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();
       }