fix: replace useAutoFocus

RocketChat · Nov 3, 2021 · 34e406e · 34e406e
1 parent c72d3cf
commit 34e406e
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 14 deletions.
diff --git a/...i/.loki/reference/desktop_forms_CloudAccountEmailForm_CloudAccountEmailForm.png b/...i/.loki/reference/desktop_forms_CloudAccountEmailForm_CloudAccountEmailForm.png
diff --git a/...i/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/...i/.loki/reference/desktop_pages_CloudAccountEmailPage_CloudAccountEmailPage.png
diff --git a/...ui/.loki/reference/mobile_forms_CloudAccountEmailForm_CloudAccountEmailForm.png b/...ui/.loki/reference/mobile_forms_CloudAccountEmailForm_CloudAccountEmailForm.png
diff --git a/...ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/...ui/.loki/reference/mobile_pages_CloudAccountEmailPage_CloudAccountEmailPage.png
diff --git a/...ui/.loki/reference/tablet_forms_CloudAccountEmailForm_CloudAccountEmailForm.png b/...ui/.loki/reference/tablet_forms_CloudAccountEmailForm_CloudAccountEmailForm.png
diff --git a/...ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png b/...ui/.loki/reference/tablet_pages_CloudAccountEmailPage_CloudAccountEmailPage.png
diff --git a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx
@@ -9,8 +9,8 @@ import {
   Box,
   CheckBox,
 } from '@rocket.chat/fuselage';
-import { useUniqueId, useAutoFocus } from '@rocket.chat/fuselage-hooks';
-import type { ReactElement } from 'react';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { ReactElement, useEffect } from 'react';
 import { useForm, SubmitHandler, Validate } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -48,7 +48,6 @@ const AdminInfoForm = ({
   onSubmit,
 }: AdminInfoFormProps): ReactElement => {
   const { t } = useTranslation();
-  const autofocus = useAutoFocus();
 
   const fullnameField = useUniqueId();
   const usernameField = useUniqueId(); // lgtm [js/insecure-randomness]
@@ -59,13 +58,18 @@ const AdminInfoForm = ({
     register,
     handleSubmit,
     formState: { isValidating, isSubmitting, errors },
+    setFocus,
   } = useForm<AdminInfoPayload>({
     defaultValues: {
       ...initialValues,
       password: '',
     },
   });
 
+  useEffect(() => {
+    setFocus('fullname');
+  }, [setFocus]);
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Form.Steps currentStep={currentStep} stepCount={stepCount} />
@@ -86,7 +90,6 @@ const AdminInfoForm = ({
                   'form.adminInfoForm.fields.fullName.placeholder'
                 )}
                 id={fullnameField}
-                ref={autofocus}
               />
             </Field.Row>
             {errors.fullname && (

diff --git a/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx b/packages/onboarding-ui/src/forms/CloudAccountEmailForm/CloudAccountEmailForm.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, EmailInput, Field } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
-import type { ReactElement } from 'react';
+import { ReactElement, useEffect } from 'react';
 import { useForm, SubmitHandler, Validate } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -34,13 +34,18 @@ const CloudAccountEmailForm = ({
     register,
     handleSubmit,
     formState: { isValidating, isSubmitting, errors },
+    setFocus,
   } = useForm<CloudAccountEmailPayload>({
     defaultValues: {
       email: '',
       ...initialValues,
     },
   });
 
+  useEffect(() => {
+    setFocus('email');
+  }, [setFocus]);
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Form.Steps currentStep={currentStep} stepCount={stepCount} />

diff --git a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx
@@ -9,12 +9,8 @@ import {
   SelectOptions,
   Box,
 } from '@rocket.chat/fuselage';
-import {
-  useBreakpoints,
-  useUniqueId,
-  useAutoFocus,
-} from '@rocket.chat/fuselage-hooks';
-import type { ReactElement, ReactNode } from 'react';
+import { useBreakpoints, useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { ReactElement, ReactNode, useEffect } from 'react';
 import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -65,17 +61,20 @@ const OrganizationInfoForm = ({
   const organizationSizeField = useUniqueId();
   const countryField = useUniqueId();
 
-  const autofocus = useAutoFocus();
-
   const {
     register,
     control,
     handleSubmit,
     formState: { isValidating, isSubmitting, errors },
+    setFocus,
   } = useForm<OrganizationInfoPayload>({
     defaultValues: initialValues,
   });
 
+  useEffect(() => {
+    setFocus('organizationName');
+  }, [setFocus]);
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Form.Steps currentStep={currentStep} stepCount={stepCount} />
@@ -94,7 +93,6 @@ const OrganizationInfoForm = ({
                   'form.organizationInfoForm.fields.organizationName.placeholder'
                 )}
                 id={organizationNameField}
-                ref={autofocus}
               />
             </Field.Row>
             {errors.organizationName && (