Merge pull request #54396 from CyberAndrii/53156-Fix-input-autofocus-on-Sage-Intacct/NetSuite-setup-pages

Fix input autofocus on Sage Intacct/NetSuite setup pages

Author: MonilBhavsar

src/components/ConnectToNetSuiteFlow/index.tsx

@@ -59,10 +59,11 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
     if (threeDotsMenuContainerRef) {
         if (!shouldUseNarrowLayout) {
             threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                setReuseConnectionPopoverPosition({
-                    horizontal: x + width,
-                    vertical: y + height,
-                });
+                const horizontal = x + width;
+                const vertical = y + height;
+                if (reuseConnectionPopoverPosition.horizontal !== horizontal || reuseConnectionPopoverPosition.vertical !== vertical) {
+                    setReuseConnectionPopoverPosition({horizontal, vertical});
+                }
             });
         }
 

src/components/ConnectToSageIntacctFlow/index.tsx

@@ -64,10 +64,11 @@ function ConnectToSageIntacctFlow({policyID}: ConnectToSageIntacctFlowProps) {
     if (threeDotsMenuContainerRef) {
         if (!shouldUseNarrowLayout) {
             threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                setReuseConnectionPopoverPosition({
-                    horizontal: x + width,
-                    vertical: y + height,
-                });
+                const horizontal = x + width;
+                const vertical = y + height;
+                if (reuseConnectionPopoverPosition.horizontal !== horizontal || reuseConnectionPopoverPosition.vertical !== vertical) {
+                    setReuseConnectionPopoverPosition({horizontal, vertical});
+                }
             });
         }
 

src/pages/workspace/accounting/intacct/EnterSageIntacctCredentialsPage.tsx

@@ -7,6 +7,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 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 {connectToSageIntacct} from '@libs/actions/connections/SageIntacct';
@@ -24,6 +25,7 @@ type SageIntacctPrerequisitesPageProps = PlatformStackScreenProps<SettingsNaviga
 function EnterSageIntacctCredentialsPage({route}: SageIntacctPrerequisitesPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
     const policyID: string = route.params.policyID;
 
     const confirmCredentials = useCallback(
@@ -70,14 +72,15 @@ function EnterSageIntacctCredentialsPage({route}: SageIntacctPrerequisitesPagePr
                 shouldValidateOnChange
             >
                 <Text style={[styles.textHeadlineH1, styles.pb5, styles.pt3]}>{translate('workspace.intacct.enterCredentials')}</Text>
-                {formItems.map((formItem) => (
+                {formItems.map((formItem, index) => (
                     <View
                         style={styles.mb4}
                         key={formItem}
                     >
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={formItem}
+                            ref={index === 0 ? inputCallbackRef : undefined}
                             label={translate(`common.${formItem}`)}
                             aria-label={translate(`common.${formItem}`)}
                             role={CONST.ROLE.PRESENTATION}