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,7 +22,9 @@ type inputProps = {
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 } & Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
-export const Input = ({
+
+export const Input = forwardRef<HTMLInputElement, inputProps>(function Input(
+  {
     disabled,
     value: valueProp,
     placeholder,
@@ -31,7 +36,9 @@ export const Input = ({
     onBlur,
     onKeyDown,
     ...otherProps
-}: inputProps) => {
+  }: 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>
   );
-};
+});