Merge pull request Expensify#69446 from software-mansion-labs/jakubkalinski0/Resolving-issues-regarding-the-disfunctional-autoFocus

mountiny · web-flow · commit a3d511450f45 · 2025-09-04T17:27:25.000+02:00
Resolving issues regarding the dysfunctional autoFocus
diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx
@@ -44,7 +44,7 @@ type AmountFormProps = {
     hideCurrencySymbol?: boolean;
 
     /** Reference to the outer element */
-    forwardedRef?: ForwardedRef<BaseTextInputRef>;
+    ref?: ForwardedRef<BaseTextInputRef>;
 } & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrowExtraSpace' | 'autoGrowMarginSide'>;
 
 /**
@@ -65,7 +65,7 @@ function AmountForm({
     autoFocus,
     autoGrowExtraSpace,
     autoGrowMarginSide,
-    forwardedRef,
+    ref,
 }: AmountFormProps) {
     const styles = useThemeStyles();
     const decimals = decimalsProp ?? getCurrencyDecimals(currency);
@@ -78,12 +78,12 @@ function AmountForm({
             displayAsTextInput={displayAsTextInput}
             onInputChange={onInputChange}
             onSymbolButtonPress={onCurrencyButtonPress}
-            forwardedRef={(ref: BaseTextInputRef | null) => {
-                if (typeof forwardedRef === 'function') {
-                    forwardedRef(ref);
-                } else if (forwardedRef && 'current' in forwardedRef) {
-                    // eslint-disable-next-line no-param-reassign, react-compiler/react-compiler
-                    forwardedRef.current = ref;
+            ref={(newRef: BaseTextInputRef | null) => {
+                if (typeof ref === 'function') {
+                    ref(newRef);
+                } else if (ref && 'current' in ref) {
+                    // eslint-disable-next-line no-param-reassign
+                    ref.current = newRef;
                 }
             }}
             symbol={getLocalizedCurrencySymbol(currency) ?? ''}
diff --git a/src/components/AmountPicker/AmountSelectorModal.tsx b/src/components/AmountPicker/AmountSelectorModal.tsx
@@ -69,7 +69,7 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
                             {...rest}
                             value={currentValue}
                             onInputChange={setValue}
-                            forwardedRef={(ref) => inputCallbackRef(ref)}
+                            ref={(ref) => inputCallbackRef(ref)}
                         />
                         <Button
                             success
diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx
@@ -100,7 +100,7 @@ type FormProviderProps<TFormID extends OnyxFormKey = OnyxFormKey> = FormProps<TF
     shouldPreventDefaultFocusOnPressSubmit?: boolean;
 
     /** Reference to the outer element */
-    forwardedRef?: ForwardedRef<FormRef>;
+    ref?: ForwardedRef<FormRef>;
 };
 
 function FormProvider({
@@ -117,7 +117,7 @@ function FormProvider({
     shouldRenderFooterAboveSubmit = false,
     shouldUseStrictHtmlTagValidation = false,
     shouldPreventDefaultFocusOnPressSubmit = false,
-    forwardedRef,
+    ref,
     ...rest
 }: FormProviderProps) {
     const [network] = useOnyx(ONYXKEYS.NETWORK, {canBeMissing: true});
@@ -306,7 +306,7 @@ function FormProvider({
         [errors, formID],
     );
 
-    useImperativeHandle(forwardedRef, () => ({
+    useImperativeHandle(ref, () => ({
         resetForm,
         resetErrors,
         resetFormFieldError,
diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx
@@ -105,7 +105,7 @@ type MoneyRequestAmountInputProps = {
     shouldWrapInputInContainer?: boolean;
 
     /** Reference to the outer element */
-    forwardedRef?: ForwardedRef<BaseTextInputRef>;
+    ref?: ForwardedRef<BaseTextInputRef>;
 } & Pick<TextInputWithSymbolProps, 'autoGrowExtraSpace' | 'submitBehavior' | 'shouldUseDefaultLineHeightForPrefix'>;
 
 type Selection = {
@@ -143,7 +143,7 @@ function MoneyRequestAmountInput({
     shouldApplyPaddingToContainer = false,
     shouldUseDefaultLineHeightForPrefix = true,
     shouldWrapInputInContainer = true,
-    forwardedRef,
+    ref,
     ...props
 }: MoneyRequestAmountInputProps) {
     const textInput = useRef<BaseTextInputRef | null>(null);
@@ -183,24 +183,24 @@ function MoneyRequestAmountInput({
             onSymbolButtonPress={onCurrencyButtonPress}
             onInputChange={onAmountChange}
             onBlur={formatAmount}
-            forwardedRef={(ref) => {
-                if (typeof forwardedRef === 'function') {
-                    forwardedRef(ref);
-                } else if (forwardedRef?.current) {
-                    // eslint-disable-next-line no-param-reassign, react-compiler/react-compiler
-                    forwardedRef.current = ref;
+            ref={(newRef) => {
+                if (typeof ref === 'function') {
+                    ref(newRef);
+                } else if (ref?.current) {
+                    // eslint-disable-next-line no-param-reassign
+                    ref.current = newRef;
                 }
                 // eslint-disable-next-line react-compiler/react-compiler
-                textInput.current = ref;
+                textInput.current = newRef;
             }}
-            numberFormRef={(ref) => {
+            numberFormRef={(newRef) => {
                 if (typeof moneyRequestAmountInputRef === 'function') {
-                    moneyRequestAmountInputRef(ref);
+                    moneyRequestAmountInputRef(newRef);
                 } else if (moneyRequestAmountInputRef && 'current' in moneyRequestAmountInputRef) {
                     // eslint-disable-next-line react-compiler/react-compiler, no-param-reassign
-                    moneyRequestAmountInputRef.current = ref;
+                    moneyRequestAmountInputRef.current = newRef;
                 }
-                numberFormRef.current = ref;
+                numberFormRef.current = newRef;
             }}
             symbol={getLocalizedCurrencySymbol(currency) ?? ''}
             symbolPosition={CONST.TEXT_INPUT_SYMBOL_POSITION.PREFIX}
diff --git a/src/components/NumberWithSymbolForm.tsx b/src/components/NumberWithSymbolForm.tsx
@@ -53,7 +53,7 @@ type NumberWithSymbolFormProps = {
     shouldWrapInputInContainer?: boolean;
 
     /** Reference to the outer element */
-    forwardedRef?: ForwardedRef<BaseTextInputRef>;
+    ref?: ForwardedRef<BaseTextInputRef>;
 } & Omit<TextInputWithSymbolProps, 'formattedAmount' | 'onAmountChange' | 'placeholder' | 'onSelectionChange' | 'onKeyPress' | 'onMouseDown' | 'onMouseUp'>;
 
 type NumberWithSymbolFormRef = {
@@ -108,7 +108,7 @@ function NumberWithSymbolForm({
     shouldApplyPaddingToContainer = false,
     shouldUseDefaultLineHeightForPrefix = true,
     shouldWrapInputInContainer = true,
-    forwardedRef,
+    ref,
     ...props
 }: NumberWithSymbolFormProps) {
     const styles = useThemeStyles();
@@ -318,12 +318,12 @@ function NumberWithSymbolForm({
                 accessibilityLabel={label}
                 value={formattedNumber}
                 onChangeText={setFormattedNumber}
-                ref={(ref: BaseTextInputRef | null) => {
-                    if (typeof forwardedRef === 'function') {
-                        forwardedRef(ref);
-                    } else if (forwardedRef && 'current' in forwardedRef) {
-                        // eslint-disable-next-line react-compiler/react-compiler, no-param-reassign
-                        forwardedRef.current = ref;
+                ref={(newRef: BaseTextInputRef | null) => {
+                    if (typeof ref === 'function') {
+                        ref(newRef);
+                    } else if (ref && 'current' in ref) {
+                        // eslint-disable-next-line no-param-reassign
+                        ref.current = newRef;
                     }
                 }}
                 prefixCharacter={symbol}
@@ -348,14 +348,14 @@ function NumberWithSymbolForm({
             onChangeAmount={setNewNumber}
             onSymbolButtonPress={onSymbolButtonPress}
             placeholder={numberFormat(0)}
-            ref={(ref: BaseTextInputRef | null) => {
-                if (typeof forwardedRef === 'function') {
-                    forwardedRef(ref);
-                } else if (forwardedRef && 'current' in forwardedRef) {
+            ref={(newRef: BaseTextInputRef | null) => {
+                if (typeof ref === 'function') {
+                    ref(newRef);
+                } else if (ref && 'current' in ref) {
                     // eslint-disable-next-line no-param-reassign
-                    forwardedRef.current = ref;
+                    ref.current = newRef;
                 }
-                textInput.current = ref;
+                textInput.current = newRef;
             }}
             symbol={symbol}
             hideSymbol={hideSymbol}
diff --git a/src/components/SubStepForms/AddressStep.tsx b/src/components/SubStepForms/AddressStep.tsx
@@ -134,7 +134,7 @@ function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({
             validate={customValidate ?? validate}
             onSubmit={onSubmit}
             style={[styles.mh5, styles.flexGrow1]}
-            forwardedRef={formRef}
+            ref={formRef}
             enabledWhenOffline
         >
             <View>
diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx
@@ -73,7 +73,7 @@ function MoneyRequestAmountForm({
     shouldKeepUserInput = false,
     chatReportID,
     hideCurrencySymbol = false,
-    forwardedRef,
+    ref,
 }: MoneyRequestAmountFormProps) {
     const styles = useThemeStyles();
     const {isExtraSmallScreenHeight} = useResponsiveLayout();
@@ -217,14 +217,14 @@ function MoneyRequestAmountForm({
                     setFormError('');
                 }}
                 shouldShowBigNumberPad={canUseTouchScreen}
-                forwardedRef={(ref) => {
-                    if (typeof forwardedRef === 'function') {
-                        forwardedRef(ref);
-                    } else if (forwardedRef && 'current' in forwardedRef) {
-                        // eslint-disable-next-line no-param-reassign, react-compiler/react-compiler
-                        forwardedRef.current = ref;
+                ref={(newRef) => {
+                    if (typeof ref === 'function') {
+                        ref(newRef);
+                    } else if (ref && 'current' in ref) {
+                        // eslint-disable-next-line no-param-reassign
+                        ref.current = newRef;
                     }
-                    textInput.current = ref;
+                    textInput.current = newRef;
                 }}
                 moneyRequestAmountInputRef={moneyRequestAmountInputRef}
                 shouldKeepUserInput={shouldKeepUserInput}
diff --git a/src/pages/iou/request/step/IOURequestStepAmount.tsx b/src/pages/iou/request/step/IOURequestStepAmount.tsx
@@ -332,7 +332,7 @@ function IOURequestStepAmount({
                 skipConfirmation={shouldSkipConfirmation ?? false}
                 iouType={iouType}
                 policyID={policy?.id}
-                forwardedRef={(e) => {
+                ref={(e) => {
                     textInput.current = e;
                 }}
                 shouldKeepUserInput={transaction?.shouldShowOriginalAmount}
diff --git a/src/pages/iou/request/step/IOURequestStepTaxAmountPage.tsx b/src/pages/iou/request/step/IOURequestStepTaxAmountPage.tsx
@@ -152,7 +152,7 @@ function IOURequestStepTaxAmountPage({
                 currency={currency}
                 amount={Math.abs(transactionDetails?.taxAmount ?? 0)}
                 taxAmount={getTaxAmount(currentTransaction, policy, currency, !!(backTo || isEditing))}
-                forwardedRef={(e) => {
+                ref={(e) => {
                     textInput.current = e;
                 }}
                 onCurrencyButtonPress={navigateToCurrencySelectionPage}
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx
@@ -189,7 +189,7 @@ function StatusPage() {
             <FormProvider
                 formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
                 style={[styles.flexGrow1, styles.flex1]}
-                forwardedRef={formRef}
+                ref={formRef}
                 submitButtonText={translate('statusPage.save')}
                 submitButtonStyles={[styles.mh5, styles.flexGrow1]}
                 onSubmit={updateStatus}
diff --git a/src/pages/settings/Security/MergeAccounts/AccountDetailsPage.tsx b/src/pages/settings/Security/MergeAccounts/AccountDetailsPage.tsx
@@ -178,7 +178,7 @@ function AccountDetailsPage() {
                     validate={validate}
                     submitButtonText={translate('common.next')}
                     isSubmitButtonVisible={false}
-                    forwardedRef={formRef}
+                    ref={formRef}
                 >
                     <View style={[styles.flexGrow1, styles.mt3]}>
                         <View>
diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountType.tsx
@@ -56,7 +56,7 @@ function AccountType({isEditing, onNext, fieldsMap}: CustomSubStepProps) {
             style={[styles.flexGrow1, styles.mt3]}
             submitButtonStyles={[styles.ph5, styles.mb0]}
             enabledWhenOffline
-            forwardedRef={formRef}
+            ref={formRef}
             isSubmitButtonVisible={!isEditing}
         >
             <View style={styles.ph5}>
diff --git a/src/pages/workspace/reports/CreateReportFieldsPage.tsx b/src/pages/workspace/reports/CreateReportFieldsPage.tsx
@@ -122,7 +122,7 @@ function WorkspaceCreateReportFieldsPage({
                     onBackButtonPress={Navigation.goBack}
                 />
                 <FormProvider
-                    forwardedRef={formRef}
+                    ref={formRef}
                     style={[styles.mh5, styles.flex1]}
                     formID={ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM}
                     onSubmit={submitForm}

Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@ function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({`
`134`	`134`	`validate={customValidate ?? validate}`
`135`	`135`	`onSubmit={onSubmit}`
`136`	`136`	`style={[styles.mh5, styles.flexGrow1]}`
`137`		`- forwardedRef={formRef}`
	`137`	`+ ref={formRef}`
`138`	`138`	`enabledWhenOffline`
`139`	`139`	`>`
`140`	`140`	`<View>`