diff --git a/packages/frontend/component/src/hooks/focus-and-select.ts b/packages/frontend/component/src/hooks/focus-and-select.ts
new file mode 100644
index 0000000000..edd92c5eaa
--- /dev/null
+++ b/packages/frontend/component/src/hooks/focus-and-select.ts
@@ -0,0 +1,33 @@
+import { useLayoutEffect, useRef } from 'react';
+
+export const useAutoFocus = <T extends HTMLElement = HTMLElement>(
+  autoFocus?: boolean
+) => {
+  const ref = useRef<T | null>(null);
+
+  useLayoutEffect(() => {
+    if (ref.current && autoFocus) {
+      // to avoid clicking on something focusable(e.g MenuItem),
+      // then the input will not be focused
+      setTimeout(() => {
+        ref.current?.focus();
+      }, 0);
+    }
+  }, [autoFocus]);
+
+  return ref;
+};
+
+export const useAutoSelect = <T extends HTMLInputElement = HTMLInputElement>(
+  autoSelect?: boolean
+) => {
+  const ref = useAutoFocus<T>(autoSelect);
+
+  useLayoutEffect(() => {
+    if (ref.current && autoSelect) {
+      ref.current?.select();
+    }
+  }, [autoSelect, ref]);
+
+  return ref;
+};
diff --git a/packages/frontend/component/src/hooks/index.ts b/packages/frontend/component/src/hooks/index.ts
new file mode 100644
index 0000000000..2c69d81da9
--- /dev/null
+++ b/packages/frontend/component/src/hooks/index.ts
@@ -0,0 +1 @@
+export { useAutoFocus, useAutoSelect } from './focus-and-select';
diff --git a/packages/frontend/component/src/ui/button/button.tsx b/packages/frontend/component/src/ui/button/button.tsx
index df7a55d53d..ed25560e3e 100644
--- a/packages/frontend/component/src/ui/button/button.tsx
+++ b/packages/frontend/component/src/ui/button/button.tsx
@@ -7,6 +7,7 @@ import type {
 } from 'react';
 import { cloneElement, forwardRef, useCallback } from 'react';
 
+import { useAutoFocus } from '../../hooks';
 import { Loading } from '../loading';
 import { Tooltip, type TooltipProps } from '../tooltip';
 import * as styles from './button.css';
@@ -120,12 +121,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       tooltip,
       tooltipShortcut,
       tooltipOptions,
+      autoFocus,
       onClick,
 
       ...otherProps
     },
-    ref
+    upstreamRef
   ) => {
+    const ref = useAutoFocus<HTMLButtonElement>(autoFocus);
+
     const handleClick = useCallback(
       (e: MouseEvent<HTMLButtonElement>) => {
         if (loading || disabled) return;
@@ -134,11 +138,22 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       [disabled, loading, onClick]
     );
 
+    const buttonRef = (el: HTMLButtonElement | null) => {
+      ref.current = el;
+      if (upstreamRef) {
+        if (typeof upstreamRef === 'function') {
+          upstreamRef(el);
+        } else {
+          upstreamRef.current = el;
+        }
+      }
+    };
+
     return (
       <Tooltip content={tooltip} shortcut={tooltipShortcut} {...tooltipOptions}>
         <button
           {...otherProps}
-          ref={ref}
+          ref={buttonRef}
           className={clsx(styles.button, className)}
           data-loading={loading || undefined}
           data-block={block || undefined}
diff --git a/packages/frontend/component/src/ui/input/input.tsx b/packages/frontend/component/src/ui/input/input.tsx
index 9e49c02bec..79f52a467d 100644
--- a/packages/frontend/component/src/ui/input/input.tsx
+++ b/packages/frontend/component/src/ui/input/input.tsx
@@ -8,14 +8,9 @@ import type {
   KeyboardEventHandler,
   ReactNode,
 } from 'react';
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from 'react';
+import { forwardRef, useCallback, useEffect } from 'react';
 
+import { useAutoFocus, useAutoSelect } from '../../hooks';
 import { input, inputWrapper } from './style.css';
 
 export type InputProps = {
@@ -55,30 +50,31 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   }: InputProps,
   upstreamRef: ForwardedRef<HTMLInputElement>
 ) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  useLayoutEffect(() => {
-    if (inputRef.current && (autoFocus || autoSelect)) {
-      // 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();
+  const focusRef = useAutoFocus<HTMLInputElement>(autoFocus);
+  const selectRef = useAutoSelect<HTMLInputElement>(autoSelect);
+
+  const inputRef = (el: HTMLInputElement | null) => {
+    focusRef.current = el;
+    selectRef.current = el;
+    if (upstreamRef) {
+      if (typeof upstreamRef === 'function') {
+        upstreamRef(el);
+      } else {
+        upstreamRef.current = el;
       }
     }
-  }, [autoFocus, autoSelect, upstreamRef]);
+  };
 
   // use native blur event to get event after unmount
   // don't use useLayoutEffect here, because the cleanup function will be called before unmount
   useEffect(() => {
     if (!onBlur) return;
-    inputRef.current?.addEventListener('blur', onBlur as any);
+    selectRef.current?.addEventListener('blur', onBlur as any);
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      inputRef.current?.removeEventListener('blur', onBlur as any);
+      selectRef.current?.removeEventListener('blur', onBlur as any);
     };
-  }, [onBlur]);
+  }, [onBlur, selectRef]);
 
   return (
     <div
@@ -105,16 +101,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           large: size === 'large',
           'extra-large': size === 'extraLarge',
         })}
-        ref={ref => {
-          inputRef.current = ref;
-          if (upstreamRef) {
-            if (typeof upstreamRef === 'function') {
-              upstreamRef(ref);
-            } else {
-              upstreamRef.current = ref;
-            }
-          }
-        }}
+        ref={inputRef}
         disabled={disabled}
         style={inputStyle}
         onChange={useCallback(
diff --git a/packages/frontend/component/src/ui/modal/confirm-modal.tsx b/packages/frontend/component/src/ui/modal/confirm-modal.tsx
index f05963912d..7728db56f8 100644
--- a/packages/frontend/component/src/ui/modal/confirm-modal.tsx
+++ b/packages/frontend/component/src/ui/modal/confirm-modal.tsx
@@ -17,6 +17,11 @@ export interface ConfirmModalProps extends ModalProps {
   cancelText?: React.ReactNode;
   cancelButtonOptions?: Omit<ButtonProps, 'children'>;
   reverseFooter?: boolean;
+  /**
+   * Auto focus on confirm button when modal opened
+   * @default true
+   */
+  autoFocusConfirm?: boolean;
 }
 
 export const ConfirmModal = ({
@@ -30,6 +35,7 @@ export const ConfirmModal = ({
   onConfirm,
   onCancel,
   width = 480,
+  autoFocusConfirm = true,
   ...props
 }: ConfirmModalProps) => {
   const onConfirmClick = useCallback(() => {
@@ -73,6 +79,7 @@ export const ConfirmModal = ({
         <Button
           onClick={onConfirmClick}
           data-testid="confirm-modal-confirm"
+          autoFocus={autoFocusConfirm}
           {...confirmButtonOptions}
         >
           {confirmText}