diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index f9298c671..030b16a5e 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -60,6 +60,8 @@ export default class IntlTelInputApp extends Component { autoComplete: 'off', // pass through arbitrary props to the tel input element telInputProps: {}, + // always format the number + format: false, }; static propTypes = { @@ -94,6 +96,7 @@ export default class IntlTelInputApp extends Component { style: StylePropTypes, useMobileFullscreenDropdown: PropTypes.bool, telInputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types + format: PropTypes.bool, }; constructor(props) { @@ -181,6 +184,7 @@ export default class IntlTelInputApp extends Component { this.handleUpDownKey = this.handleUpDownKey.bind(this); this.handleInputChange = this.handleInputChange.bind(this); this.changeHighlightCountry = this.changeHighlightCountry.bind(this); + this.formatNumber = this.formatNumber.bind(this); } componentDidMount() { @@ -711,6 +715,20 @@ export default class IntlTelInputApp extends Component { } } + formatNumber(number) { + if (window.intlTelInputUtils && this.selectedCountryData) { + const format = !this.props.separateDialCode && + (this.nationalMode || number.charAt(0) !== '+') ? + window.intlTelInputUtils.numberFormat.NATIONAL : + window.intlTelInputUtils.numberFormat.INTERNATIONAL; + + number = window.intlTelInputUtils.formatNumber(number, + this.selectedCountryData.iso2, format); + } + + return number; + } + // update the input's value to the given val (format first if possible) // if doNotify is true, calls notifyPhoneNumberChange with the formatted value // NOTE: this is called from _setInitialState, handleUtils and setNumber @@ -1175,6 +1193,8 @@ export default class IntlTelInputApp extends Component { autoFocus={ this.props.autoFocus } autoComplete={ this.props.autoComplete } inputProps={ this.props.telInputProps } + formatNumber={ this.formatNumber } + format={ this.props.format } /> ); diff --git a/src/components/TelInput.js b/src/components/TelInput.js index 8a71c0aa3..1e326be7f 100644 --- a/src/components/TelInput.js +++ b/src/components/TelInput.js @@ -15,6 +15,8 @@ class TelInput extends Component { autoComplete: PropTypes.string, inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types refCallback: PropTypes.func.isRequired, + formatNumber: PropTypes.func.isRequired, + format: PropTypes.bool, }; render() { @@ -29,7 +31,7 @@ class TelInput extends Component { readOnly={ this.props.readonly ? 'readonly' : false } name={ this.props.fieldName } id={ this.props.fieldId } - value={ this.props.value } + value={ this.props.format ? this.props.formatNumber(this.props.value) : this.props.value } placeholder={ this.props.placeholder } onChange={ this.props.handleInputChange } onBlur={ this.props.handleOnBlur } diff --git a/src/index.html b/src/index.html index 6823226ff..90644132a 100644 --- a/src/index.html +++ b/src/index.html @@ -238,6 +238,11 @@

Props

{} Pass through arbitrary props to the tel input element. + + format + false + Format the number. +