Enable Form inputs to manipulate related field values

FORMS.md

@@ -210,4 +210,4 @@ Form.js will automatically provide the following props to any input with the inp
 - defaultValue: The input default value.
 - errorText: The translated error text that is returned by validate for that specific input.
 - onBlur: An onBlur handler that calls validate.
-- onChange: An onChange handler that saves draft values and calls validate.
+- onInputChange: An onChange handler that saves draft values and calls validate for that input (inputA). Passing an inputID as a second param allows inputA to manipulate the input value of the provided inputID (inputB).

src/components/AddressSearch.js

@@ -106,7 +106,11 @@ const AddressSearch = (props) => {
         if (_.size(values) === 0) {
             return;
         }
-        props.onInputChange(values);
+        if (props.inputID) {
+            _.each(values, (value, key) => props.onInputChange(value, key));
+        } else {
+            props.onInputChange(values);
+        }
     };
 
     return (
@@ -161,7 +165,7 @@ const AddressSearch = (props) => {
                         label: props.label,
                         containerStyles: props.containerStyles,
                         errorText: props.errorText,
-                        hint: props.hint,
+                        hint: displayListViewBorder ? undefined : props.hint,
                         value: props.value,
                         defaultValue: props.defaultValue,
                         inputID: props.inputID,

src/components/Form.js

@@ -158,10 +158,16 @@ class Form extends React.Component {
                     this.setTouchedInput(inputID);
                     this.validate(this.inputValues);
                 },
-                onInputChange: (value) => {
-                    this.inputValues[inputID] = value;
+                onInputChange: (value, key) => {
+                    const inputKey = key || inputID;
+                    this.inputValues[inputKey] = value;
+                    const inputRef = this.inputRefs[inputKey];
+
+                    if (key && inputRef && _.isFunction(inputRef.setNativeProps)) {
+                        inputRef.setNativeProps({value});
+                    }
                     if (child.props.shouldSaveDraft) {
-                        FormActions.setDraftValues(this.props.formID, {[inputID]: value});
+                        FormActions.setDraftValues(this.props.formID, {[inputKey]: value});
                     }
                     this.validate(this.inputValues);
                 },

src/stories/Form.stories.js

@@ -104,7 +104,7 @@ const Template = (args) => {
             />
             <View style={styles.mt4}>
                 <StatePicker
-                    inputID="pickState"
+                    inputID="state"
                     shouldSaveDraft
                 />
             </View>
@@ -179,8 +179,8 @@ const defaultArgs = {
         if (!values.pickAnotherFruit) {
             errors.pickAnotherFruit = 'Please select a fruit';
         }
-        if (!values.pickState) {
-            errors.pickState = 'Please select a state';
+        if (!values.state) {
+            errors.state = 'Please select a state';
         }
         if (!values.checkbox) {
             errors.checkbox = 'You must accept the Terms of Service to continue';
@@ -204,7 +204,7 @@ const defaultArgs = {
         dob: '1990-01-01',
         pickFruit: 'orange',
         pickAnotherFruit: 'apple',
-        pickState: 'AL',
+        state: 'AL',
         checkbox: false,
     },
 };
@@ -221,7 +221,7 @@ InputError.args = {
         pickFruit: '',
         dob: '',
         pickAnotherFruit: '',
-        pickState: '',
+        state: '',
         checkbox: false,
     },
 };