Merge pull request #45507 from mananjadhav/mj-netsuite-autofocus

[#Wave-Control: Add NetSuite] Added auto focus for all NetSuite forms
Expensify · Jul 23, 2024 · 38cddee · 38cddee
2 parents 73ebb80 + 460cd99
commit 38cddee
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 2 deletions.
diff --git a/...ages/workspace/accounting/netsuite/NetSuiteTokenInput/substeps/NetSuiteTokenInputForm.tsx b/...ages/workspace/accounting/netsuite/NetSuiteTokenInput/substeps/NetSuiteTokenInputForm.tsx
@@ -6,6 +6,7 @@ import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -19,6 +20,7 @@ import INPUT_IDS from '@src/types/form/NetSuiteTokenInputForm';
 function NetSuiteTokenInputForm({onNext, policyID}: SubStepProps & {policyID: string}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
 
     const formInputs = Object.values(INPUT_IDS);
 
@@ -58,14 +60,15 @@ function NetSuiteTokenInputForm({onNext, policyID}: SubStepProps & {policyID: st
                 shouldValidateOnBlur
                 shouldValidateOnChange
             >
-                {formInputs.map((formInput) => (
+                {formInputs.map((formInput, index) => (
                     <View
                         style={styles.mb4}
                         key={formInput}
                     >
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={formInput}
+                            ref={index === 0 ? inputCallbackRef : undefined}
                             label={translate(`workspace.netsuite.tokenInput.formSteps.enterCredentials.formInputs.${formInput}`)}
                             aria-label={translate(`workspace.netsuite.tokenInput.formSteps.enterCredentials.formInputs.${formInput}`)}
                             role={CONST.ROLE.PRESENTATION}

diff --git a/src/pages/workspace/accounting/netsuite/advanced/NetSuiteCustomFormIDPage.tsx b/src/pages/workspace/accounting/netsuite/advanced/NetSuiteCustomFormIDPage.tsx
@@ -6,6 +6,7 @@ import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Connections from '@libs/actions/connections/NetSuiteCommands';
@@ -21,6 +22,8 @@ import ROUTES from '@src/ROUTES';
 
 function NetSuiteCustomFormIDPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
+
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '-1';
     const route = useRoute();
@@ -82,6 +85,7 @@ function NetSuiteCustomFormIDPage({policy}: WithPolicyConnectionsProps) {
                 >
                     <InputWrapper
                         InputComponent={TextInput}
+                        ref={inputCallbackRef}
                         inputID={params.expenseType}
                         label={translate(`workspace.netsuite.advancedConfig.${isReimbursable ? 'customFormIDReimbursable' : 'customFormIDNonReimbursable'}`)}
                         aria-label={translate(`workspace.netsuite.advancedConfig.${isReimbursable ? 'customFormIDReimbursable' : 'customFormIDNonReimbursable'}`)}

diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldEdit.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldEdit.tsx
@@ -5,6 +5,7 @@ import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateNetSuiteCustomLists, updateNetSuiteCustomSegments} from '@libs/actions/connections/NetSuiteCommands';
@@ -47,6 +48,7 @@ function NetSuiteImportCustomFieldEdit({
     const policyID = policy?.id ?? '-1';
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
 
     const config = policy?.connections?.netsuite?.options?.config;
     const allRecords = useMemo(() => config?.syncOptions?.[importCustomField] ?? [], [config?.syncOptions, importCustomField]);
@@ -123,10 +125,11 @@ function NetSuiteImportCustomFieldEdit({
                         role={CONST.ROLE.PRESENTATION}
                         spellCheck={false}
                         defaultValue={fieldValue ?? ''}
+                        ref={inputCallbackRef}
                     />
                 </FormProvider>
             ),
-        [config?.syncOptions?.pendingFields, customField, fieldName, fieldValue, importCustomField, styles.flexGrow1, styles.ph5, translate, updateRecord, validate],
+        [config?.syncOptions?.pendingFields, customField, fieldName, fieldValue, importCustomField, inputCallbackRef, styles.flexGrow1, styles.ph5, translate, updateRecord, validate],
     );
 
     const renderSelection = useMemo(

diff --git a/...ing/netsuite/import/NetSuiteImportCustomFieldNew/substeps/CustomSegmentInternalIdStep.tsx b/...ing/netsuite/import/NetSuiteImportCustomFieldNew/substeps/CustomSegmentInternalIdStep.tsx
@@ -4,6 +4,7 @@ import InputWrapper from '@components/Form/InputWrapper';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Parser from '@libs/Parser';
@@ -14,6 +15,8 @@ import INPUT_IDS from '@src/types/form/NetSuiteCustomFieldForm';
 function CustomSegmentInternalIdStep({customSegmentType}: CustomFieldSubStepWithPolicy) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
+
     const customSegmentRecordType = customSegmentType ?? CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_SEGMENT;
 
     const fieldLabel = translate(`workspace.netsuite.import.importCustomFields.customSegments.fields.internalID`);
@@ -30,6 +33,7 @@ function CustomSegmentInternalIdStep({customSegmentType}: CustomFieldSubStepWith
                 aria-label={fieldLabel}
                 role={CONST.ROLE.PRESENTATION}
                 spellCheck={false}
+                ref={inputCallbackRef}
             />
             <View style={[styles.flex1, styles.mv3, styles.renderHTML, styles.textDecorationSkipInkNone]}>
                 <RenderHTML

diff --git a/...ccounting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/CustomSegmentNameStep.tsx b/...ccounting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/CustomSegmentNameStep.tsx
@@ -4,6 +4,7 @@ import InputWrapper from '@components/Form/InputWrapper';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Parser from '@libs/Parser';
@@ -14,6 +15,7 @@ import INPUT_IDS from '@src/types/form/NetSuiteCustomFieldForm';
 function CustomSegmentNameStep({customSegmentType}: CustomFieldSubStepWithPolicy) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
 
     const fieldLabel = translate(`workspace.netsuite.import.importCustomFields.customSegments.fields.segmentName`);
 
@@ -31,6 +33,7 @@ function CustomSegmentNameStep({customSegmentType}: CustomFieldSubStepWithPolicy
                 aria-label={fieldLabel}
                 role={CONST.ROLE.PRESENTATION}
                 spellCheck={false}
+                ref={inputCallbackRef}
             />
             <View style={[styles.flex1, styles.mv3, styles.renderHTML, styles.textDecorationSkipInkNone]}>
                 <RenderHTML

diff --git a/...nting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/CustomSegmentScriptIdStep.tsx b/...nting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/CustomSegmentScriptIdStep.tsx
@@ -4,6 +4,7 @@ import InputWrapper from '@components/Form/InputWrapper';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Parser from '@libs/Parser';
@@ -14,6 +15,7 @@ import INPUT_IDS from '@src/types/form/NetSuiteCustomFieldForm';
 function CustomSegmentScriptIdStep({customSegmentType}: CustomFieldSubStepWithPolicy) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
 
     const customSegmentRecordType = customSegmentType ?? CONST.NETSUITE_CUSTOM_RECORD_TYPES.CUSTOM_SEGMENT;
 
@@ -35,6 +37,7 @@ function CustomSegmentScriptIdStep({customSegmentType}: CustomFieldSubStepWithPo
                 aria-label={fieldLabel}
                 role={CONST.ROLE.PRESENTATION}
                 spellCheck={false}
+                ref={inputCallbackRef}
             />
             <View style={[styles.flex1, styles.mv3, styles.renderHTML, styles.textDecorationSkipInkNone]}>
                 <RenderHTML

diff --git a/...counting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/TransactionFieldIDStep.tsx b/...counting/netsuite/import/NetSuiteImportCustomFieldNew/substeps/TransactionFieldIDStep.tsx
@@ -4,6 +4,7 @@ import InputWrapper from '@components/Form/InputWrapper';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Parser from '@libs/Parser';
@@ -13,6 +14,7 @@ import INPUT_IDS from '@src/types/form/NetSuiteCustomFieldForm';
 function TransactionFieldIDStep() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
 
     const fieldLabel = translate(`workspace.netsuite.import.importCustomFields.customLists.fields.transactionFieldID`);
 
@@ -26,6 +28,7 @@ function TransactionFieldIDStep() {
                 aria-label={fieldLabel}
                 role={CONST.ROLE.PRESENTATION}
                 spellCheck={false}
+                ref={inputCallbackRef}
             />
             <View style={[styles.flex1, styles.mv3, styles.renderHTML, styles.textDecorationSkipInkNone]}>
                 <RenderHTML html={`<comment>${Parser.replace(translate(`workspace.netsuite.import.importCustomFields.customLists.addForm.transactionFieldIDFooter`))}</comment>`} />