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 (
@@ -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('
', () => {
const component = mount(
);
assert.equal(component.find('CountryInput').length, 0);
});
+
+ it('should call onBlur for each input', () => {
+ const callback = sinon.spy();
+ const component = mount(
);
+ const fields = ['address1', 'address2', 'city', 'state', 'postal', 'countryCode'];
+ fields.forEach((field) => {
+ const input = component.find(`[name="${field}"]`);
+ input.simulate('blur');
+ assert(callback.calledWith(field));
+ });
+ });
});