diff --git a/example/index.html b/example/index.html
index 1b36a1e35..0fe63d1f6 100644
--- a/example/index.html
+++ b/example/index.html
@@ -107,11 +107,12 @@
Validation callback
import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';
import './node_modules/react-intl-tel-input/dist/main.css';
-const changeHandler = (status, value, countryData, number, id) => {
+const handler = (status, value, countryData, number, id) => {
console.log(status, value, countryData, number, id);
};
-ReactDOM.render(<IntlTelInput onPhoneNumberChange={changeHandler}
+ReactDOM.render(<IntlTelInput onPhoneNumberChange={handler}
+ onPhoneNumberBlur={handler}
css={['intl-tel-input', 'form-control']}
utilsScript={'libphonenumber.js'} />, document.getElementById('content'));
@@ -243,7 +244,12 @@ Props
onPhoneNumberChange |
null |
- Validation callback function. It returns validation status, input box value and selected country data. |
+ Optional validation callback function. It returns validation status, input box value and selected country data. |
+
+
+ onPhoneNumberBlur |
+ null |
+ Optional validation callback function. It returns validation status, input box value and selected country data. |
diff --git a/src/containers/IntlTelInputApp.js b/src/containers/IntlTelInputApp.js
index 5aabb23b5..ee9d3f287 100644
--- a/src/containers/IntlTelInputApp.js
+++ b/src/containers/IntlTelInputApp.js
@@ -48,6 +48,7 @@ export default class IntlTelInputApp extends Component {
// specify the path to the libphonenumber script to enable validation/formatting
utilsScript: '',
onPhoneNumberChange: null,
+ onPhoneNumberBlur: null,
onSelectFlag: null,
disabled: false,
};
@@ -74,6 +75,7 @@ export default class IntlTelInputApp extends Component {
preferredCountries: PropTypes.arrayOf(PropTypes.string),
utilsScript: PropTypes.string,
onPhoneNumberChange: PropTypes.func,
+ onPhoneNumberBlur: PropTypes.func,
onSelectFlag: PropTypes.func,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
@@ -778,6 +780,14 @@ export default class IntlTelInputApp extends Component {
handleOnBlur() {
this.removeEmptyDialCode();
+ if (typeof this.props.onPhoneNumberBlur === 'function') {
+ const value = this.state.value;
+ const isValid = this.isValidNumber(value);
+ const fullNumber = this.formatFullNumber(value);
+ this.props.onPhoneNumberBlur(
+ isValid, value, this.selectedCountryData,
+ fullNumber, this.getExtension());
+ }
}
bindDocumentClick() {
@@ -920,14 +930,18 @@ export default class IntlTelInputApp extends Component {
return false;
}
+ formatFullNumber(number) {
+ return window.intlTelInputUtils
+ ? this.getNumber(window.intlTelInputUtils.numberFormat.INTERNATIONAL)
+ : number;
+ }
+
notifyPhoneNumberChange(newNumber) {
if (typeof this.props.onPhoneNumberChange === 'function') {
- const result = this.isValidNumber(newNumber);
- const fullNumber = window.intlTelInputUtils ?
- this.getNumber(window.intlTelInputUtils.numberFormat.INTERNATIONAL) :
- newNumber;
+ const isValid = this.isValidNumber(newNumber);
+ const fullNumber = this.formatFullNumber(newNumber);
this.props.onPhoneNumberChange(
- result, newNumber, this.selectedCountryData,
+ isValid, newNumber, this.selectedCountryData,
fullNumber, this.getExtension());
}
}
diff --git a/src/example.js b/src/example.js
index 667d535ec..a25782105 100644
--- a/src/example.js
+++ b/src/example.js
@@ -23,6 +23,12 @@ const lookup = (callback) => {
};
};
+function log(...args) {
+ /* eslint-disable */
+ console.log(args);
+ /* eslint-enable */
+}
+
class DemoComponent extends React.Component {
constructor(props) {
super(props);
@@ -38,19 +44,22 @@ class DemoComponent extends React.Component {
}
changeHandler(name, isValid, value, countryData, number, ext) {
- /* eslint-disable */
- console.log(isValid, value, countryData, number, ext);
- /* eslint-enable */
+ log(isValid, value, countryData, number, ext);
this.setState({
[name]: value,
});
}
+ blurHandler(isValid, value, countryData, number, ext) {
+ log(isValid, value, countryData, number, ext);
+ }
+
render() {
return (
Validation callback
import 'file?name=libphonenumber.js!./node_modules/react-intl-tel-input/dist/libphonenumber.js';
import './node_modules/react-intl-tel-input/dist/main.css';
-const changeHandler = (status, value, countryData, number, id) => {
+const handler = (status, value, countryData, number, id) => {
console.log(status, value, countryData, number, id);
};
-ReactDOM.render(<IntlTelInput onPhoneNumberChange={changeHandler}
+ReactDOM.render(<IntlTelInput onPhoneNumberChange={handler}
+ onPhoneNumberBlur={handler}
css={['intl-tel-input', 'form-control']}
utilsScript={'libphonenumber.js'} />, document.getElementById('content'));
@@ -243,7 +244,12 @@ Props
onPhoneNumberChange |
null |
- Validation callback function. It returns validation status, input box value and selected country data. |
+ Optional validation callback function. It returns validation status, input box value and selected country data. |
+
+
+ onPhoneNumberBlur |
+ null |
+ Optional validation callback function. It returns validation status, input box value and selected country data. |
diff --git a/tests/TelInput-test.js b/tests/TelInput-test.js
index 1116b4825..8c7544a1e 100644
--- a/tests/TelInput-test.js
+++ b/tests/TelInput-test.js
@@ -312,6 +312,36 @@ describe('TelInput', () => {
assert(parent.state.value === '');
});
+ it('onPhoneNumberBlur', () => {
+ requests[0].respond(200,
+ { 'Content-Type': 'text/javascript' },
+ libphonenumberUtils);
+ window.eval(getScript().text);
+
+ let expected = '';
+ const onPhoneNumberBlur = (isValid, newNumber, countryData, fullNumber, ext) => {
+ expected = `${isValid},${newNumber},${countryData.iso2},${fullNumber},${ext}`;
+ };
+
+ const parent = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ const input = ReactTestUtils.findRenderedComponentWithType(
+ parent,
+ TelInput
+ );
+
+ ReactTestUtils.Simulate.change(findDOMNode(input), { target: { value: '+886911222333' } });
+ ReactTestUtils.Simulate.blur(findDOMNode(input));
+ assert(expected === 'true,+886911222333,tw,+886 911 222 333,null');
+ });
+
it('has empty value and not nationalMode, not autoHideDialCode and not separateDialCode', () => {
const parent = ReactTestUtils.renderIntoDocument(