fix: autofocus (#1614)

Co-authored-by: VictorNanka <victornanka@gmail.com>

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')}

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')}

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>
   );
-};
+});