Allow nationalMode to be used with separateDialCode

README.md

@@ -217,7 +217,7 @@ Prevent the user from entering invalid characters. Unfortunately this had to be
 
 **separateDialCode** 
 Type: `Boolean` Default: `false` 
-Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable `nationalMode` because technically we are dealing with international numbers, but with the dial code separated.
+Display the country dial code next to the selected flag.
 
 <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/separateDialCode.png" width="257px" height="46px">
 

build/js/intlTelInput-jquery.js

@@ -155,7 +155,7 @@
  placeholderNumberType: "MOBILE",
  // the countries at the top of the list. defaults to united states and united kingdom
  preferredCountries: [ "us", "gb" ],
- // display the country dial code next to the selected flag so it's not part of the typed number
+ // display the country dial code next to the selected flag
  separateDialCode: false,
  // specify the path to the libphonenumber script to enable validation/formatting
  utilsScript: ""
@@ -199,14 +199,10 @@
  key: "_init",
  value: function _init() {
  var _this2 = this;
- // if in nationalMode, disable options relating to dial codes
+ // if in nationalMode, do not insert dial codes
  if (this.options.nationalMode) this.options.autoInsertDialCode = false;
- // if separateDialCode then doesn't make sense to A) insert dial code into input
- // (autoInsertDialCode), and B) display national numbers (because we're displaying the country
- // dial code next to them)
- if (this.options.separateDialCode) {
- this.options.autoInsertDialCode = this.options.nationalMode = false;
- }
+ // if separateDialCode enabled, do not insert dial codes
+ if (this.options.separateDialCode) this.options.autoInsertDialCode = false;
  // we cannot just test screen size as some smartphones/website meta tags will report desktop
  // resolutions
  // Note: for some reason jasmine breaks if you put this in the main Plugin function with the
@@ -871,7 +867,7 @@
  value: function _updateValFromNumber(originalNumber) {
  var number = originalNumber;
  if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
- var useNational = !this.options.separateDialCode && (this.options.nationalMode || number.charAt(0) !== "+");
+ var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
  var _intlTelInputUtils$nu = intlTelInputUtils.numberFormat, NATIONAL = _intlTelInputUtils$nu.NATIONAL, INTERNATIONAL = _intlTelInputUtils$nu.INTERNATIONAL;
  var format = useNational ? NATIONAL : INTERNATIONAL;
  number = intlTelInputUtils.formatNumber(number, this.selectedCountryData.iso2, format);
@@ -894,7 +890,7 @@
  if (number.charAt(0) !== "1") number = "1".concat(number);
  number = "+".concat(number);
  }
- // update flag if user types area code for another country
+ // if separateDialCode enabled, then consider the selected dial code to be part of the number
  if (this.options.separateDialCode && selectedDialCode && number.charAt(0) !== "+") {
  number = "+".concat(selectedDialCode).concat(number);
  }

build/js/intlTelInput.js

@@ -150,7 +150,7 @@
  placeholderNumberType: "MOBILE",
  // the countries at the top of the list. defaults to united states and united kingdom
  preferredCountries: [ "us", "gb" ],
- // display the country dial code next to the selected flag so it's not part of the typed number
+ // display the country dial code next to the selected flag
  separateDialCode: false,
  // specify the path to the libphonenumber script to enable validation/formatting
  utilsScript: ""
@@ -194,14 +194,10 @@
  key: "_init",
  value: function _init() {
  var _this2 = this;
- // if in nationalMode, disable options relating to dial codes
+ // if in nationalMode, do not insert dial codes
  if (this.options.nationalMode) this.options.autoInsertDialCode = false;
- // if separateDialCode then doesn't make sense to A) insert dial code into input
- // (autoInsertDialCode), and B) display national numbers (because we're displaying the country
- // dial code next to them)
- if (this.options.separateDialCode) {
- this.options.autoInsertDialCode = this.options.nationalMode = false;
- }
+ // if separateDialCode enabled, do not insert dial codes
+ if (this.options.separateDialCode) this.options.autoInsertDialCode = false;
  // we cannot just test screen size as some smartphones/website meta tags will report desktop
  // resolutions
  // Note: for some reason jasmine breaks if you put this in the main Plugin function with the
@@ -866,7 +862,7 @@
  value: function _updateValFromNumber(originalNumber) {
  var number = originalNumber;
  if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
- var useNational = !this.options.separateDialCode && (this.options.nationalMode || number.charAt(0) !== "+");
+ var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
  var _intlTelInputUtils$nu = intlTelInputUtils.numberFormat, NATIONAL = _intlTelInputUtils$nu.NATIONAL, INTERNATIONAL = _intlTelInputUtils$nu.INTERNATIONAL;
  var format = useNational ? NATIONAL : INTERNATIONAL;
  number = intlTelInputUtils.formatNumber(number, this.selectedCountryData.iso2, format);
@@ -889,7 +885,7 @@
  if (number.charAt(0) !== "1") number = "1".concat(number);
  number = "+".concat(number);
  }
- // update flag if user types area code for another country
+ // if separateDialCode enabled, then consider the selected dial code to be part of the number
  if (this.options.separateDialCode && selectedDialCode && number.charAt(0) !== "+") {
  number = "+".concat(selectedDialCode).concat(number);
  }

src/js/intlTelInput.js

@@ -46,7 +46,7 @@ const defaults = {
  placeholderNumberType: 'MOBILE',
  // the countries at the top of the list. defaults to united states and united kingdom
  preferredCountries: ['us', 'gb'],
- // display the country dial code next to the selected flag so it's not part of the typed number
+ // display the country dial code next to the selected flag
  separateDialCode: false,
  // specify the path to the libphonenumber script to enable validation/formatting
  utilsScript: '',
@@ -95,15 +95,11 @@ class Iti {
  }
 
  _init() {
- // if in nationalMode, disable options relating to dial codes
+ // if in nationalMode, do not insert dial codes
  if (this.options.nationalMode) this.options.autoInsertDialCode = false;
 
- // if separateDialCode then doesn't make sense to A) insert dial code into input
- // (autoInsertDialCode), and B) display national numbers (because we're displaying the country
- // dial code next to them)
- if (this.options.separateDialCode) {
- this.options.autoInsertDialCode = this.options.nationalMode = false;
- }
+ // if separateDialCode enabled, do not insert dial codes
+ if (this.options.separateDialCode) this.options.autoInsertDialCode = false;
 
  // we cannot just test screen size as some smartphones/website meta tags will report desktop
  // resolutions
@@ -849,8 +845,7 @@ class Iti {
  _updateValFromNumber(originalNumber) {
  let number = originalNumber;
  if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
- const useNational = (!this.options.separateDialCode
- && (this.options.nationalMode || number.charAt(0) !== '+'));
+ const useNational = (this.options.nationalMode || (number.charAt(0) !== '+' && !this.options.separateDialCode));
  const { NATIONAL, INTERNATIONAL } = intlTelInputUtils.numberFormat;
  const format = useNational ? NATIONAL : INTERNATIONAL;
  number = intlTelInputUtils.formatNumber(number, this.selectedCountryData.iso2, format);
@@ -877,7 +872,7 @@ class Iti {
  number = `+${number}`;
  }
 
- // update flag if user types area code for another country
+ // if separateDialCode enabled, then consider the selected dial code to be part of the number
  if (this.options.separateDialCode && selectedDialCode && number.charAt(0) !== '+') {
  number = `+${selectedDialCode}${number}`;
  }
@@ -984,7 +979,7 @@ class Iti {
  this.selectedFlag.setAttribute('title', title);
 
  if (this.options.separateDialCode) {
- const dialCode = (this.selectedCountryData.dialCode) ? `+${this.selectedCountryData.dialCode}` : '';
+ const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : '';
  this.selectedDialCode.innerHTML = dialCode;
  // offsetWidth is zero if input is in a hidden container during initialisation
  const selectedFlagWidth = this.selectedFlag.offsetWidth || this._getHiddenSelectedFlagWidth();

src/spec/tests/options/separateDialCode.js

@@ -14,11 +14,12 @@ describe("separateDialCode:", function() {
 
 
  // we test with "gb" because the ntl number is different to the intl number (aside from the dial code)
- describe("init plugin with initialCountry=gb", function() {
+ describe("init plugin with initialCountry=gb and nationalMode=false", function() {
 
  beforeEach(function() {
  iti = window.intlTelInput(input[0], {
  separateDialCode: true,
+ nationalMode: false,
  initialCountry: "gb",
  });
  });
@@ -57,12 +58,49 @@ describe("separateDialCode:", function() {
  });
 
 
- // we test with "ca" because we had some bugs with area codes
+ describe("init plugin with initialCountry=gb and nationalMode=true", function() {
+
+ beforeEach(function() {
+ iti = window.intlTelInput(input[0], {
+ separateDialCode: true,
+ nationalMode: true,
+ initialCountry: "gb",
+ });
+ });
+
+ it("formats the placeholder correctly", function() {
+ // national format
+ expect(input.attr("placeholder")).toEqual("07400 123456");
+ });
+
+
+ describe("calling setNumber to a valid intl number", function() {
+
+ beforeEach(function() {
+ iti.setNumber("+447400123456");
+ });
+
+ it("formats the number correctly", function() {
+ // national format
+ expect(getInputVal()).toEqual("07400 123456");
+ });
+
+ it("calling getNumber returns the full intl number", function() {
+ expect(iti.getNumber()).toEqual("+447400123456");
+ });
+
+ });
+
+ });
+
+
+ // we test with "ca" (Canada) because we had some bugs with area codes
  describe("init plugin with initialCountry=ca", function() {
 
  beforeEach(function() {
  iti = window.intlTelInput(input[0], {
  separateDialCode: true,
+ nationalMode: false,
  initialCountry: "ca",
  });
  });
@@ -88,6 +126,7 @@ describe("separateDialCode:", function() {
  beforeEach(function() {
  iti = window.intlTelInput(input[0], {
  separateDialCode: true,
+ nationalMode: false,
  initialCountry: "as",
  });
  });
@@ -112,6 +151,7 @@ describe("separateDialCode:", function() {
  input.val("(922) 555-1234");
  iti = window.intlTelInput(input[0], {
  separateDialCode: true,
+ nationalMode: false,
  initialCountry: "ru",
  });
  });