Fix AddressSearch input

src/components/AddressSearch.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useRef, useState} from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {LogBox, ScrollView, View} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
@@ -37,12 +37,18 @@ const propTypes = {
     /** Error text to display */
     errorText: PropTypes.string,
 
+    /** Hint text to display */
+    hint: PropTypes.string,
+
     /** The label to display for the field */
     label: PropTypes.string.isRequired,
 
     /** The value to set the field to initially */
     value: PropTypes.string,
 
+    /** The value to set the field to initially */
+    defaultValue: PropTypes.string,
+
     /** A callback function when the value of this field has changed */
     onInputChange: PropTypes.func.isRequired,
 
@@ -58,7 +64,9 @@ const defaultProps = {
     shouldSaveDraft: false,
     onBlur: () => {},
     errorText: '',
+    hint: '',
     value: undefined,
+    defaultValue: undefined,
     containerStyles: [],
 };
 
@@ -68,11 +76,6 @@ const defaultProps = {
 const AddressSearch = (props) => {
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
 
-    // We use `skippedFirstOnChangeTextRef` to work around a feature of the library:
-    // The library is calling onChangeText with '' at the start and we don't need this
-    // https://github.com/FaridSafi/react-native-google-places-autocomplete/blob/47d7223dd48f85da97e80a0729a985bbbcee353f/GooglePlacesAutocomplete.js#L148
-    const skippedFirstOnChangeTextRef = useRef(false);
-
     const saveLocationDetails = (details) => {
         const addressComponents = details.address_components;
         if (!addressComponents) {
@@ -168,17 +171,19 @@ const AddressSearch = (props) => {
                         label: props.label,
                         containerStyles: props.containerStyles,
                         errorText: props.errorText,
+                        hint: props.hint,
                         value: props.value,
+                        defaultValue: props.defaultValue,
                         isFormInput: props.isFormInput,
                         inputID: props.inputID,
                         shouldSaveDraft: props.shouldSaveDraft,
                         onBlur: props.onBlur,
                         autoComplete: 'off',
-                        onChangeText: (text) => {
-                            if (skippedFirstOnChangeTextRef.current) {
-                                props.onInputChange({street: text});
+                        onInputChange: (text) => {
+                            if (props.isFormInput) {
+                                props.onInputChange(text);
                             } else {
-                                skippedFirstOnChangeTextRef.current = true;
+                                props.onInputChange({street: text});
                             }
 
                             // If the text is empty, we set displayListViewBorder to false to prevent UI flickering

src/pages/EnablePayments/AdditionalDetailsStep.js

@@ -278,10 +278,8 @@ class AdditionalDetailsStep extends React.Component {
                                             });
                                         }}
                                         errorText={this.getErrorText('addressStreet')}
+                                        hint={this.props.translate('common.noPO')}
                                     />
-                                    <Text style={[styles.mutedTextLabel, styles.mt1]}>
-                                        {this.props.translate('common.noPO')}
-                                    </Text>
                                     {this.props.walletAdditionalDetailsDraft.addressStreet ? (
                                         <>
                                             {/** Once the user has started entering his address, show the other address fields (city, state, zip) */}

src/pages/ReimbursementAccount/AddressForm.js

@@ -7,7 +7,6 @@ import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import CONST from '../../CONST';
 import StatePicker from '../../components/StatePicker';
-import Text from '../../components/Text';
 
 const propTypes = {
 
@@ -56,8 +55,8 @@ const AddressForm = props => (
             value={props.values.street}
             onInputChange={props.onFieldChange}
             errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
+            hint={props.translate('common.noPO')}
         />
-        <Text style={[styles.mutedTextLabel, styles.mt1]}>{props.translate('common.noPO')}</Text>
         <View style={[styles.flexRow, styles.mt4]}>
             <View style={[styles.flex2, styles.mr2]}>
                 <TextInput

src/stories/Form.stories.js

@@ -56,6 +56,7 @@ const Template = (args) => {
                 label="Street"
                 inputID="street"
                 containerStyles={[styles.mt4]}
+                hint="No PO box"
                 isFormInput
             />
             <DatePicker
@@ -175,6 +176,9 @@ const defaultArgs = {
         if (!values.accountNumber) {
             errors.accountNumber = 'Please enter an account number';
         }
+        if (!values.street) {
+            errors.street = 'Please enter an address';
+        }
         if (!values.dob) {
             errors.dob = 'Please enter your date of birth';
         }
@@ -205,6 +209,7 @@ const defaultArgs = {
     draftValues: {
         routingNumber: '00001',
         accountNumber: '1111222233331111',
+        street: '123 Happy St, Happyland HP 12345',
         dob: '1990-01-01',
         pickFruit: 'orange',
         pickAnotherFruit: 'apple',
@@ -221,6 +226,7 @@ InputError.args = {
     draftValues: {
         routingNumber: '',
         accountNumber: '',
+        street: '',
         pickFruit: '',
         dob: '',
         pickAnotherFruit: '',