From 9cf0fa3ef9c2854a2ee777bed8ffeecb4eaf0967 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Tue, 23 Jan 2018 13:34:01 -0800
Subject: [PATCH] gt - Add onBlur to AddressInput

---
 src/components/AddressInput.js       | 10 +++++++++-
 stories/Address.js                   |  1 +
 test/components/AddressInput.spec.js | 11 +++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
index 26f3bcfc0..0769eb6b1 100644
--- a/src/components/AddressInput.js
+++ b/src/components/AddressInput.js
@@ -18,6 +18,7 @@ class AddressInput extends React.Component {
     error: PropTypes.shape(addressPropType),
     id: PropTypes.string,
     labels: PropTypes.shape(addressPropType),
+    onBlur: PropTypes.func,
     onChange: PropTypes.func,
     showCountry: PropTypes.bool,
     showLabels: PropTypes.bool,
@@ -36,6 +37,7 @@ class AddressInput extends React.Component {
       postal: 'Zip',
       countryCode: 'Country',
     },
+    onBlur: () => {},
     onChange: () => {},
     showCountry: true,
     showLabels: false,
@@ -60,7 +62,7 @@ class AddressInput extends React.Component {
   }
 
   render() {
-    const { disabled, error, id, labels, showCountry, showLabels } = this.props;
+    const { disabled, error, id, labels, onBlur, showCountry, showLabels } = this.props;
 
     return (
       <div id={id}>
@@ -75,6 +77,7 @@ class AddressInput extends React.Component {
             placeholder={labels.address1}
             {...this.propsFor('address1')}
             state={error.address1 && 'danger'}
+            onBlur={() => onBlur('address1')}
             onChange={flow([readEvent, this.onChange])}
             disabled={disabled}
             getRef={this.bindAddress1}
@@ -91,6 +94,7 @@ class AddressInput extends React.Component {
             placeholder={labels.address2}
             {...this.propsFor('address2')}
             state={error.address2 && 'danger'}
+            onBlur={() => onBlur('address2')}
             onChange={flow([readEvent, this.onChange])}
             disabled={disabled}
           />
@@ -109,6 +113,7 @@ class AddressInput extends React.Component {
                 placeholder={labels.city}
                 {...this.propsFor('city')}
                 state={error.city && 'danger'}
+                onBlur={() => onBlur('city')}
                 onChange={flow([readEvent, this.onChange])}
                 disabled={disabled}
               />
@@ -126,6 +131,7 @@ class AddressInput extends React.Component {
                 name="state"
                 placeholder={labels.state}
                 {...this.propsFor('state')}
+                onBlur={() => onBlur('state')}
                 onChange={state => this.onChange({ state })}
                 disabled={disabled}
               />
@@ -143,6 +149,7 @@ class AddressInput extends React.Component {
                 placeholder={labels.postal}
                 {...this.propsFor('postal')}
                 state={error.postal && 'danger'}
+                onBlur={() => onBlur('postal')}
                 onChange={flow([readEvent, this.onChange])}
                 disabled={disabled}
               />
@@ -161,6 +168,7 @@ class AddressInput extends React.Component {
               name="countryCode"
               placeholder={labels.countryCode}
               {...this.propsFor('countryCode')}
+              onBlur={() => onBlur('countryCode')}
               onChange={countryCode => this.onChange({ countryCode })}
               disabled={disabled}
             />
diff --git a/stories/Address.js b/stories/Address.js
index a42d032a0..d05440867 100644
--- a/stories/Address.js
+++ b/stories/Address.js
@@ -16,6 +16,7 @@ storiesOf('AddressInput', module)
           postal: '12345-1234',
           countryCode: 'US'
         }}
+        onBlur={action('address onBlur')}
         onChange={action('address onChange')}
         disabled={boolean('disabled')}
         error={object('error', {})}
diff --git a/test/components/AddressInput.spec.js b/test/components/AddressInput.spec.js
index 9a46da809..89c160049 100644
--- a/test/components/AddressInput.spec.js
+++ b/test/components/AddressInput.spec.js
@@ -336,5 +336,16 @@ describe('<AddressInput />', () => {
     const component = mount(<AddressInput showCountry={false} />);
     assert.equal(component.find('CountryInput').length, 0);
   });
+
+  it('should call onBlur for each input', () => {
+    const callback = sinon.spy();
+    const component = mount(<AddressInput onBlur={callback} />);
+    const fields = ['address1', 'address2', 'city', 'state', 'postal', 'countryCode'];
+    fields.forEach((field) => {
+      const input = component.find(`[name="${field}"]`);
+      input.simulate('blur');
+      assert(callback.calledWith(field));
+    });
+  });
 });