From 1bbb0aee4bbb47c066ebb32466a10db49c94249d Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Sun, 19 Mar 2023 19:40:29 -0500
Subject: [PATCH] fix: autofocus (#1614)

Co-authored-by: VictorNanka <victornanka@gmail.com>
---
 .../panel/general/delete/index.tsx            |  5 +++
 .../pure/create-workspace-modal/index.tsx     |  6 ++++
 packages/component/src/ui/input/Input.tsx     | 36 +++++++++++--------
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx
index 12f24d801d..78a335a330 100644
--- a/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx
+++ b/apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx
@@ -68,6 +68,11 @@ export const WorkspaceDeleteModal = ({
         )}
         <StyledInputContent>
           <Input
+            ref={ref => {
+              if (ref) {
+                setTimeout(() => ref.focus(), 0);
+              }
+            }}
             onChange={setDeleteStr}
             data-testid="delete-workspace-input"
             placeholder={t('Placeholder of delete workspace')}
diff --git a/apps/web/src/components/pure/create-workspace-modal/index.tsx b/apps/web/src/components/pure/create-workspace-modal/index.tsx
index 9908a1315c..15d2eb6844 100644
--- a/apps/web/src/components/pure/create-workspace-modal/index.tsx
+++ b/apps/web/src/components/pure/create-workspace-modal/index.tsx
@@ -19,6 +19,7 @@ export const CreateWorkspaceModal = ({
 }: ModalProps) => {
   const [workspaceName, setWorkspaceName] = useState('');
   const isComposition = useRef(false);
+
   const handleCreateWorkspace = useCallback(() => {
     onCreate(workspaceName);
   }, [onCreate, workspaceName]);
@@ -48,6 +49,11 @@ export const CreateWorkspaceModal = ({
             <ContentTitle>{t('New Workspace')}</ContentTitle>
             <p>{t('Workspace description')}</p>
             <Input
+              ref={ref => {
+                if (ref) {
+                  setTimeout(() => ref.focus(), 0);
+                }
+              }}
               data-testid="create-workspace-input"
               onKeyDown={handleKeyDown}
               placeholder={t('Set a Workspace name')}
diff --git a/packages/component/src/ui/input/Input.tsx b/packages/component/src/ui/input/Input.tsx
index 6f06e4c6a0..99376c2726 100644
--- a/packages/component/src/ui/input/Input.tsx
+++ b/packages/component/src/ui/input/Input.tsx
@@ -1,12 +1,15 @@
 import type {
   FocusEventHandler,
+  ForwardedRef,
   HTMLAttributes,
   InputHTMLAttributes,
   KeyboardEventHandler,
 } from 'react';
+import { forwardRef } from 'react';
 import { useEffect, useState } from 'react';
 
 import { StyledInput } from './style';
+
 type inputProps = {
   value?: string;
   placeholder?: string;
@@ -19,19 +22,23 @@ type inputProps = {
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 } & Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
-export const Input = ({
-  disabled,
-  value: valueProp,
-  placeholder,
-  maxLength,
-  minLength,
-  height,
-  width = 260,
-  onChange,
-  onBlur,
-  onKeyDown,
-  ...otherProps
-}: inputProps) => {
+
+export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
+  {
+    disabled,
+    value: valueProp,
+    placeholder,
+    maxLength,
+    minLength,
+    height,
+    width = 260,
+    onChange,
+    onBlur,
+    onKeyDown,
+    ...otherProps
+  }: inputProps,
+  ref: ForwardedRef<HTMLInputElement>
+) {
   const [value, setValue] = useState<string>(valueProp || '');
   const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
     const { value } = e.target;
@@ -51,6 +58,7 @@ export const Input = ({
   }, [valueProp]);
   return (
     <StyledInput
+      ref={ref}
       value={value}
       disabled={disabled}
       placeholder={placeholder}
@@ -64,4 +72,4 @@ export const Input = ({
       {...otherProps}
     ></StyledInput>
   );
-};
+});