Make email input be react controlled in loan and consign forms

js/components/ascribe_forms/form_consign.js

@@ -4,11 +4,12 @@ import React from 'react';
 
 import Button from 'react-bootstrap/lib/Button';
 
+import InputTextAreaToggable from './input_textarea_toggable';
 import Form from './form';
 import Property from './property';
-import InputTextAreaToggable from './input_textarea_toggable';
 
 import AscribeSpinner from '../ascribe_spinner';
+
 import AclInformation from '../ascribe_buttons/acl_information';
 
 import { getLangText } from '../../utils/lang_utils.js';
@@ -30,12 +31,33 @@ let ConsignForm = React.createClass({
         };
     },
 
+    getInitialState() {
+        return {
+            email: this.props.email
+        };
+    },
+
     getFormData() {
         return this.props.id;
     },
 
+    handleEmailOnChange(event) {
+        // event.target.value is the submitted email of the consignee
+        this.setState({
+            email: event && event.target && event.target.value || ''
+        });
+    },
+
     render() {
-        const { autoFocusProperty, email, id, handleSuccess, message, labels, url } = this.props;
+        const { email } = this.state;
+        const {
+            autoFocusProperty,
+            email: defaultEmail,
+            handleSuccess,
+            id,
+            message,
+            labels,
+            url } = this.props;
 
         return (
             <Form
@@ -64,12 +86,13 @@ let ConsignForm = React.createClass({
                     autoFocus={autoFocusProperty === 'email'}
                     name='consignee'
                     label={labels.email || getLangText('Email')}
-                    editable={!email}
+                    editable={!defaultEmail}
-                    overrideForm={!!email}>
+                    onChange={this.handleEmailOnChange}
+                    overrideForm={!!defaultEmail}>
                     <input
                         type="email"
+                        value={email}
                         placeholder={getLangText('Email of the consignee')}
-                        defaultValue={email}
                         required/>
                 </Property>
                 <Property

js/components/ascribe_forms/form_loan.js

@@ -89,6 +89,9 @@ let LoanForm = React.createClass({
             // fetch the available contractagreements (pending/accepted)
             ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
         }
+        return {
+            email: this.props.email || ''
+        };
     },
 
     getFormData(){
@@ -98,13 +101,11 @@ let LoanForm = React.createClass({
         );
     },
 
-    handleOnChange(event) {
+    handleEmailOnChange(event) {
         // event.target.value is the submitted email of the loanee
-        if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
+        this.setState({
-            this.getContractAgreementsOrCreatePublic(event.target.value);
+            email: event && event.target && event.target.value || ''
-        } else {
+        });
-            ContractAgreementListActions.flushContractAgreementList();
-        }
     },
 
     getContractAgreementId() {
@@ -218,9 +219,11 @@ let LoanForm = React.createClass({
     },
 
     render() {
+        const { email } = this.state;
         const {
             children,
             email,
+            email: defaultEmail,
             handleSuccess,
             gallery,
             loanHeading,
@@ -255,9 +258,9 @@ let LoanForm = React.createClass({
                 <Property
                     name='loanee'
                     label={getLangText('Loanee Email')}
-                    editable={!email}
+                    editable={!defaultEmail}
-                    onChange={this.handleOnChange}
+                    onChange={this.handleEmailOnChange}
-                    overrideForm={!!email}>
+                    overrideForm={!!defaultEmail}>
                     <input
                         value={email}
                         type="email"