Trim the value when going back on connect bank account

src/components/AddressSearch/index.js

@@ -257,6 +257,10 @@ function AddressSearch(props) {
             props.onInputChange(values);
         }
 
+        if (_.isFunction(props.onValueChange)) {
+            props.onValueChange(values);
+        }
+
         props.onPress(values);
     };
 
@@ -337,6 +341,10 @@ function AddressSearch(props) {
                                 props.onInputChange({street: text});
                             }
 
+                            if (_.isFunction(props.onValueChange)) {
+                                props.onValueChange({street: text});
+                            }
+
                             // If the text is empty, we set displayListViewBorder to false to prevent UI flickering
                             if (_.isEmpty(text)) {
                                 setDisplayListViewBorder(false);

src/pages/ReimbursementAccount/AddressForm.js

@@ -103,6 +103,7 @@ function AddressForm(props) {
                     value={props.values.street}
                     defaultValue={props.defaultValues.street}
                     onInputChange={props.onFieldChange}
+                    onValueChange={props.onFieldChange}
                     errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
                     hint={props.translate('common.noPO')}
                     renamedInputKeys={props.inputKeys}
@@ -129,6 +130,7 @@ function AddressForm(props) {
                     value={props.values.state}
                     defaultValue={props.defaultValues.state || ''}
                     onInputChange={(value) => props.onFieldChange({state: value})}
+                    onValueChange={(value) => props.onFieldChange({state: value})}
                     errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
                 />
             </View>

src/pages/ReimbursementAccount/CompanyStep.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import {withOnyx} from 'react-native-onyx';
@@ -54,6 +54,23 @@ const defaultProps = {
 };
 
 function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaultStateForField, onBackButtonPress, translate, session, user, policyID}) {
+    const defaultWebsite = useMemo(() => (lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`), [user, session]);
+    const [companyInfomation, setCompanyInfomation] = useState({
+        street: getDefaultStateForField('addressStreet') || reimbursementAccountDraft.addressStreet,
+        city: getDefaultStateForField('addressCity') || reimbursementAccountDraft.addressCity,
+        state: getDefaultStateForField('addressState') || reimbursementAccountDraft.addressState,
+        zipCode: getDefaultStateForField('addressZipCode') || reimbursementAccountDraft.addressZipCode,
+        companyPhone: getDefaultStateForField('companyPhone') || reimbursementAccountDraft.companyPhone,
+        website: getDefaultStateForField('website', defaultWebsite) || reimbursementAccountDraft.website,
+    });
+
+    const onFieldChange = (field) => {
+        setCompanyInfomation((prevCompanyInformation) => ({
+            ...prevCompanyInformation,
+            ...field,
+        }));
+    };
+
     /**
      * @param {Array} fieldNames
      *
@@ -64,8 +81,6 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
         ..._.pick(reimbursementAccountDraft, ...fieldNames),
     });
 
-    const defaultWebsite = useMemo(() => (lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`), [user, session]);
-
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object} - Object containing the errors for each inputID, e.g. {inputID1: error1, inputID2: error2}
@@ -173,18 +188,19 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                 />
                 <AddressForm
                     translate={translate}
-                    defaultValues={{
-                        street: getDefaultStateForField('addressStreet'),
-                        city: getDefaultStateForField('addressCity'),
-                        state: getDefaultStateForField('addressState'),
-                        zipCode: getDefaultStateForField('addressZipCode'),
+                    values={{
+                        street: companyInfomation.street,
+                        city: companyInfomation.city,
+                        state: companyInfomation.state,
+                        zipCode: companyInfomation.zipCode,
                     }}
                     inputKeys={{
                         street: 'addressStreet',
                         city: 'addressCity',
                         state: 'addressState',
                         zipCode: 'addressZipCode',
                     }}
+                    onFieldChange={onFieldChange}
                     shouldSaveDraft
                     streetTranslationKey="common.companyAddress"
                 />
@@ -196,7 +212,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     containerStyles={[styles.mt4]}
                     keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
                     placeholder={translate('common.phoneNumberPlaceholder')}
-                    defaultValue={getDefaultStateForField('companyPhone')}
+                    value={companyInfomation.companyPhone}
+                    onValueChange={(value) => onFieldChange({companyPhone: value})}
                     shouldSaveDraft
                 />
                 <TextInput
@@ -205,7 +222,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     accessibilityLabel={translate('companyStep.companyWebsite')}
                     accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                     containerStyles={[styles.mt4]}
-                    defaultValue={getDefaultStateForField('website', defaultWebsite)}
+                    value={companyInfomation.website}
+                    onValueChange={(value) => onFieldChange({website: value})}
                     shouldSaveDraft
                     hint={translate('common.websiteExample')}
                     keyboardType={CONST.KEYBOARD_TYPE.URL}