From 46977b59ca1f54ff4e63aaa52964bb0ddb20d1bd Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 10 Oct 2024 00:42:04 -0700
Subject: [PATCH] Delay Input autoSelect a bit

---
 .../src/components/common/Input.tsx           | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index 8399676385..af60ffc1f8 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -49,7 +49,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
     useEffect(() => {
       if (autoSelect) {
-        inputRef.current?.select();
+        // Select on mount does not work properly for inputs that are inside a dialog.
+        // See https://github.com/facebook/react/issues/23301#issuecomment-1656908450
+        // for the reason why we need to use setTimeout here.
+        setTimeout(() => inputRef.current?.select());
       }
     }, [autoSelect]);
 
@@ -107,17 +110,24 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
 Input.displayName = 'Input';
 
-export function BigInput(props: InputProps) {
-  return (
-    <Input
-      {...props}
-      className={`${css({
-        padding: 10,
-        fontSize: 15,
-        border: 'none',
-        ...styles.shadow,
-        '&[data-focused]': { border: 'none', ...styles.shadow },
-      })} ${props.className}`}
-    />
-  );
-}
+type BigInputProps = InputProps;
+
+export const BigInput = forwardRef<HTMLInputElement, BigInputProps>(
+  (props, ref) => {
+    return (
+      <Input
+        ref={ref}
+        {...props}
+        className={`${css({
+          padding: 10,
+          fontSize: 15,
+          border: 'none',
+          ...styles.shadow,
+          '&[data-focused]': { border: 'none', ...styles.shadow },
+        })} ${props.className}`}
+      />
+    );
+  },
+);
+
+BigInput.displayName = 'BigInput';