From 81b829e7c38e12d67e323409b1a02992c395a5f5 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 30 Nov 2023 14:51:33 +0100
Subject: [PATCH 1/2] add FormProvider in AddressForm

---
 src/components/AddressForm.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/AddressForm.js b/src/components/AddressForm.js
index 98650f94232b..1621328d388f 100644
--- a/src/components/AddressForm.js
+++ b/src/components/AddressForm.js
@@ -11,7 +11,8 @@ import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';
-import Form from './Form';
+import FormProvider from './Form/FormProvider';
+import InputWrapper from './Form/InputWrapper';
 import StatePicker from './StatePicker';
 import TextInput from './TextInput';
 
@@ -115,7 +116,7 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
     }, []);
 
     return (
-        <Form
+        <FormProvider
             style={[styles.flexGrow1, styles.mh5]}
             formID={formID}
             validate={validator}
@@ -124,7 +125,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
             enabledWhenOffline
         >
             <View>
-                <AddressSearch
+                <InputWrapper
+                    InputComponent={AddressSearch}
                     inputID="addressLine1"
                     label={translate('common.addressLine', {lineNumber: 1})}
                     onValueChange={(data, key) => {
@@ -146,7 +148,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 />
             </View>
             <View style={styles.formSpaceVertical} />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="addressLine2"
                 label={translate('common.addressLine', {lineNumber: 2})}
                 aria-label={translate('common.addressLine', {lineNumber: 2})}
@@ -158,7 +161,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
             />
             <View style={styles.formSpaceVertical} />
             <View style={styles.mhn5}>
-                <CountrySelector
+                <InputWrapper
+                    InputComponent={CountrySelector}
                     inputID="country"
                     value={country}
                     shouldSaveDraft={shouldSaveDraft}
@@ -167,7 +171,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
             <View style={styles.formSpaceVertical} />
             {isUSAForm ? (
                 <View style={styles.mhn5}>
-                    <StatePicker
+                    <InputWrapper
+                        InputComponent={StatePicker}
                         inputID="state"
                         defaultValue={state}
                         onValueChange={onAddressChanged}
@@ -175,7 +180,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                     />
                 </View>
             ) : (
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="state"
                     label={translate('common.stateOrProvince')}
                     aria-label={translate('common.stateOrProvince')}
@@ -188,7 +194,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 />
             )}
             <View style={styles.formSpaceVertical} />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="city"
                 label={translate('common.city')}
                 aria-label={translate('common.city')}
@@ -200,7 +207,8 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 shouldSaveDraft={shouldSaveDraft}
             />
             <View style={styles.formSpaceVertical} />
-            <TextInput
+            <InputWrapper
+                InputComponent={TextInput}
                 inputID="zipPostCode"
                 label={translate('common.zipPostCode')}
                 aria-label={translate('common.zipPostCode')}
@@ -212,7 +220,7 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
                 onValueChange={onAddressChanged}
                 shouldSaveDraft={shouldSaveDraft}
             />
-        </Form>
+        </FormProvider>
     );
 }
 

From 7a32ed0f8442f3d2cc570f3132d29a2d8e339771 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 30 Nov 2023 15:08:04 +0100
Subject: [PATCH 2/2] fix forwardedRef prop type for CountrySelector

---
 src/components/CountrySelector.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.js
index 13fc215f1d8c..b138bc949937 100644
--- a/src/components/CountrySelector.js
+++ b/src/components/CountrySelector.js
@@ -7,6 +7,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import ROUTES from '@src/ROUTES';
 import FormHelpMessage from './FormHelpMessage';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import refPropTypes from './refPropTypes';
 
 const propTypes = {
     /** Form error text. e.g when no country is selected */
@@ -23,7 +24,7 @@ const propTypes = {
     inputID: PropTypes.string.isRequired,
 
     /** React ref being forwarded to the MenuItemWithTopDescription */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 };
 
 const defaultProps = {