From 018bc7c4a5daab23b30dafd6244b29e718679dfa Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:08:26 +0200
Subject: [PATCH 1/4] Add FormProvider in MoneyRequestMerchantPage

---
 src/pages/iou/MoneyRequestMerchantPage.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index af20930ffe8d..178e804b38c0 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -7,7 +7,6 @@ import lodashGet from 'lodash/get';
 import TextInput from '../../components/TextInput';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
-import Form from '../../components/Form';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -16,6 +15,8 @@ import * as IOU from '../../libs/actions/IOU';
 import CONST from '../../CONST';
 import useLocalize from '../../hooks/useLocalize';
 import {iouPropTypes, iouDefaultProps} from './propTypes';
+import FormProvider from '../../components/Form/FormProvider';
+import InputWrapper from '../../components/Form/InputWrapper';
 
 const propTypes = {
     /** Onyx Props */
@@ -99,7 +100,7 @@ function MoneyRequestMerchantPage({iou, route}) {
                 title={translate('common.merchant')}
                 onBackButtonPress={() => navigateBack()}
             />
-            <Form
+            <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM}
                 onSubmit={(value) => updateMerchant(value)}
@@ -108,7 +109,8 @@ function MoneyRequestMerchantPage({iou, route}) {
                 enabledWhenOffline
             >
                 <View style={styles.mb4}>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="moneyRequestMerchant"
                         name="moneyRequestMerchant"
                         defaultValue={iou.merchant}
@@ -119,7 +121,7 @@ function MoneyRequestMerchantPage({iou, route}) {
                         ref={(el) => (inputRef.current = el)}
                     />
                 </View>
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }

From d32ff9244b86f9970c91ecf50f7602043d67890d Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 30 Oct 2023 12:36:03 +0100
Subject: [PATCH 2/4] fix prettier

---
 src/pages/iou/MoneyRequestMerchantPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index e786208b38bd..a8614ebeb889 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -4,6 +4,8 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapperWithRef from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
@@ -15,8 +17,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {iouDefaultProps, iouPropTypes} from './propTypes';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapperWithRef from '@components/Form/InputWrapper';
 
 const propTypes = {
     /** Onyx Props */

From 1b030dbe4213af29639e389f88b81e3d59bd4722 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 30 Oct 2023 12:40:04 +0100
Subject: [PATCH 3/4] fix forwardedref proptype error

---
 src/pages/iou/MoneyRequestMerchantPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index a8614ebeb889..64f12fa1cd64 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -48,7 +48,7 @@ const defaultProps = {
 
 function MoneyRequestMerchantPage({iou, route}) {
     const {translate} = useLocalize();
-    const inputRef = useRef({});
+    const inputRef = useRef(null);
     const iouType = lodashGet(route, 'params.iouType', '');
     const reportID = lodashGet(route, 'params.reportID', '');
 
@@ -118,7 +118,7 @@ function MoneyRequestMerchantPage({iou, route}) {
                         label={translate('common.merchant')}
                         accessibilityLabel={translate('common.merchant')}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        ref={inputRef}
+                        ref={(el) => inputRef.current = el}
                     />
                 </View>
             </FormProvider>

From c4a3d17c3f164437363a286d11b349a9785db89d Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 30 Oct 2023 12:48:01 +0100
Subject: [PATCH 4/4] fix prettier braces error

---
 src/pages/iou/MoneyRequestMerchantPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index 64f12fa1cd64..195e6d1dfbf4 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -118,7 +118,7 @@ function MoneyRequestMerchantPage({iou, route}) {
                         label={translate('common.merchant')}
                         accessibilityLabel={translate('common.merchant')}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        ref={(el) => inputRef.current = el}
+                        ref={(el) => (inputRef.current = el)}
                     />
                 </View>
             </FormProvider>