intl-tel-input 17.0.20 → 18.0.0

package/src/js/intlTelInput.js

@@ -15,8 +15,9 @@ let id = 0;
 const defaults = {
   // whether or not to allow the dropdown
   allowDropdown: true,
-  // if there is just a dial code in the input: remove it on blur
-  autoHideDialCode: true,
+  // auto insert dial code (A) on init, (B) on user selecting a country, (C) on calling setCountry
+  // also listen for blur/submit and auto remove dial code if that's all there is
+  autoInsertDialCode: false,
   // add a placeholder in the input with an example number for the selected country
   autoPlaceholder: 'polite',
   // modify the parentClass
@@ -37,7 +38,7 @@ const defaults = {
   initialCountry: '',
   // localized country names e.g. { 'de': 'Deutschland' }
   localizedCountries: null,
-  // don't insert international dial codes
+  // deal with national numbers instead of international numbers
   nationalMode: true,
   // display only these countries
   onlyCountries: [],
@@ -45,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: '',
@@ -94,15 +95,11 @@ class Iti {
   }
 
   _init() {
-    // if in nationalMode, disable options relating to dial codes
-    if (this.options.nationalMode) this.options.autoHideDialCode = false;
+    // 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
-    // (autoHideDialCode), and B) display national numbers (because we're displaying the country
-    // dial code next to them)
-    if (this.options.separateDialCode) {
-      this.options.autoHideDialCode = 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
@@ -151,7 +148,7 @@ class Iti {
     // set the initial state of the input value and the selected flag
     this._setInitialState();
 
-    // start all of the event listeners: autoHideDialCode, input keydown, selectedFlag click
+    // start all of the event listeners: autoInsertDialCode, input keydown, selectedFlag click
     this._initListeners();
 
     // utils script, and auto country
@@ -237,7 +234,9 @@ class Iti {
 
   // sort by country name
   _countryNameSort(a, b) {
-    return a.name.localeCompare(b.name);
+    if (a.name < b.name) return -1;
+    if (a.name > b.name) return 1;
+    return 0;
   }
 
 
@@ -329,22 +328,35 @@ class Iti {
     wrapper.appendChild(this.telInput);
 
     // selected flag (displayed to left of input)
+    // using Aria tags for "Select-Only Combobox Example"
+    // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
     this.selectedFlag = this._createEl('div', {
       class: 'iti__selected-flag',
-      role: 'combobox',
-      'aria-controls': `iti-${this.id}__country-listbox`,
-      'aria-owns': `iti-${this.id}__country-listbox`,
-      'aria-expanded': 'false',
+      ...(this.options.allowDropdown && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox',
+        'aria-controls': `iti-${this.id}__country-listbox`,
+        'aria-owns': `iti-${this.id}__country-listbox`,
+        'aria-expanded': 'false',
+        'aria-label': 'Telephone country code',
+      }),
     }, this.flagsContainer);
     this.selectedFlagInner = this._createEl('div', { class: 'iti__flag' }, this.selectedFlag);
 
+    if (this.telInput.disabled) {
+      this.selectedFlag.setAttribute('aria-disabled', 'true');
+    }
+
     if (this.options.separateDialCode) {
       this.selectedDialCode = this._createEl('div', { class: 'iti__selected-dial-code' }, this.selectedFlag);
     }
 
     if (this.options.allowDropdown) {
-      // make element focusable and tab navigable
-      this.selectedFlag.setAttribute('tabindex', '0');
+      if (!this.telInput.disabled) {
+        // make element focusable and tab navigable
+        this.selectedFlag.setAttribute('tabindex', '0');
+      }
+
       this.dropdownArrow = this._createEl('div', { class: 'iti__arrow' }, this.selectedFlag);
 
       // country dropdown: preferred countries, then divider, then all countries
@@ -431,9 +443,7 @@ class Iti {
     const isRegionlessNanp = this._isRegionlessNanp(val);
     const {
       initialCountry,
-      nationalMode,
-      autoHideDialCode,
-      separateDialCode,
+      autoInsertDialCode,
     } = this.options;
 
     // if we already have a dial code, and it's not a regionlessNanp, we can go ahead and set the
@@ -458,8 +468,8 @@ class Iti {
         }
       }
 
-      // if empty and no nationalMode and no autoHideDialCode then insert the default dial code
-      if (!val && !nationalMode && !autoHideDialCode && !separateDialCode) {
+      // if empty and autoInsertDialCode then insert the dial code
+      if (!val && autoInsertDialCode) {
         this.telInput.value = `+${this.selectedCountryData.dialCode}`;
       }
     }
@@ -473,7 +483,7 @@ class Iti {
   // initialise the main event listeners: input keyup, and click selected flag
   _initListeners() {
     this._initKeyListeners();
-    if (this.options.autoHideDialCode) this._initBlurListeners();
+    if (this.options.autoInsertDialCode) this._initBlurListeners();
     if (this.options.allowDropdown) this._initDropdownListeners();
     if (this.hiddenInput) this._initHiddenInputListener();
   }
@@ -614,7 +624,7 @@ class Iti {
   }
 
 
-  // listen for blur/submit (for autoHideDialCode feature)
+  // listen for blur/submit (for autoInsertDialCode feature)
   _initBlurListeners() {
     // on blur or form submit: if just a dial code then remove it
     this._handleSubmitOrBlurEvent = () => {
@@ -840,8 +850,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);
@@ -862,13 +871,13 @@ class Iti {
     // dial code, so fine to ignore this bit
     let number = originalNumber;
     const selectedDialCode = this.selectedCountryData.dialCode;
-    const isNanp = selectedDialCode === '1';
+    const isNanp = (selectedDialCode === '1');
     if (number && this.options.nationalMode && isNanp && number.charAt(0) !== '+') {
       if (number.charAt(0) !== '1') number = `1${number}`;
       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}`;
     }
@@ -936,6 +945,7 @@ class Iti {
     if (prevItem) prevItem.classList.remove('iti__highlight');
     this.highlightedItem = listItem;
     this.highlightedItem.classList.add('iti__highlight');
+    this.selectedFlag.setAttribute('aria-activedescendant', listItem.getAttribute('id'));
 
     if (shouldFocus) this.highlightedItem.focus();
   }
@@ -975,7 +985,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();
@@ -1000,7 +1010,6 @@ class Iti {
         nextItem.setAttribute('aria-selected', 'true');
         nextItem.classList.add('iti__active');
         this.activeItem = nextItem;
-        this.selectedFlag.setAttribute('aria-activedescendant', nextItem.getAttribute('id'));
       }
     }
 
@@ -1052,7 +1061,7 @@ class Iti {
     const flagChanged = this._setFlag(listItem.getAttribute('data-country-code'));
     this._closeDropdown();
 
-    this._updateDialCode(listItem.getAttribute('data-dial-code'), true);
+    this._updateDialCode(listItem.getAttribute('data-dial-code'));
 
     // focus the input
     this.telInput.focus();
@@ -1071,6 +1080,8 @@ class Iti {
   _closeDropdown() {
     this.countryList.classList.add('iti__hide');
     this.selectedFlag.setAttribute('aria-expanded', 'false');
+    this.selectedFlag.removeAttribute('aria-activedescendant');
+
     // update the arrow
     this.dropdownArrow.classList.remove('iti__arrow--up');
 
@@ -1119,7 +1130,7 @@ class Iti {
 
   // replace any existing dial code with the new one
   // Note: called from _selectListItem and setCountry
-  _updateDialCode(newDialCodeBare, hasSelectedListItem) {
+  _updateDialCode(newDialCodeBare) {
     const inputVal = this.telInput.value;
     // save having to pass this every time
     const newDialCode = `+${newDialCodeBare}`;
@@ -1136,24 +1147,16 @@ class Iti {
         // (no way to determine where the invalid dial code ends and the rest of the number begins)
         newNumber = newDialCode;
       }
-    } else if (this.options.nationalMode || this.options.separateDialCode) {
-      // don't do anything
-      return;
-    } else {
-      // nationalMode is disabled
+      this.telInput.value = newNumber;
+    } else if (this.options.autoInsertDialCode) {
       if (inputVal) {
         // there is an existing value with no dial code: prefix the new dial code
         newNumber = newDialCode + inputVal;
-      } else if (hasSelectedListItem || !this.options.autoHideDialCode) {
-        // no existing value and either they've just selected a list item, or autoHideDialCode is
-        // disabled: insert new dial code
-        newNumber = newDialCode;
       } else {
-        return;
+        newNumber = newDialCode;
       }
+      this.telInput.value = newNumber;
     }
-
-    this.telInput.value = newNumber;
   }
 
 
@@ -1296,8 +1299,8 @@ class Iti {
     // unbind hiddenInput listeners
     if (this.hiddenInput && form) form.removeEventListener('submit', this._handleHiddenInputSubmit);
 
-    // unbind autoHideDialCode listeners
-    if (this.options.autoHideDialCode) {
+    // unbind autoInsertDialCode listeners
+    if (this.options.autoInsertDialCode) {
       if (form) form.removeEventListener('submit', this._handleSubmitOrBlurEvent);
       this.telInput.removeEventListener('blur', this._handleSubmitOrBlurEvent);
     }
@@ -1377,7 +1380,7 @@ class Iti {
     // check if already selected
     if (!this.selectedFlagInner.classList.contains(`iti__${countryCode}`)) {
       this._setFlag(countryCode);
-      this._updateDialCode(this.selectedCountryData.dialCode, false);
+      this._updateDialCode(this.selectedCountryData.dialCode);
       this._triggerCountryChange();
     }
   }

package/src/spec/tests/core/dropdownShortcuts.js

@@ -1,12 +1,13 @@
 "use strict";
 
-describe("dropdown shortcuts: init plugin (with nationalMode=false) to test keyboard shortcuts", function() {
+describe("dropdown shortcuts: init plugin (with nationalMode=false, autoInsertDialCode=true) to test keyboard shortcuts", function() {
 
   beforeEach(function() {
     intlSetup();
     input = $("<input>").appendTo("body");
     iti = window.intlTelInput(input[0], {
-      nationalMode: false
+      nationalMode: false,
+      autoInsertDialCode: true,
     });
   });
 

package/src/spec/tests/core/multipleInstances.js

@@ -7,20 +7,21 @@ describe("multiple instances: init plugin (with nationalMode=false) to test mult
     afghanistanCountryCode = "af",
     albaniaCountryCode = "al",
     chinaCountryCode = "cn",
-    chinaDialCode = "+86";
+    chinaDialCode = "+86",
+    koreaCountryCode = 'kr',
+    russiaCountryCode = 'ru';
 
   beforeEach(function() {
     intlSetup();
     input = $("<input>").wrap("div");
     input2 = $("<input>").wrap("div");
-    // japan and china
+
     iti = window.intlTelInput(input[0], {
-      onlyCountries: [chinaCountryCode, afghanistanCountryCode],
+      onlyCountries: [afghanistanCountryCode, chinaCountryCode],
       nationalMode: false,
     });
-    // korea, china and russia
     iti2 = window.intlTelInput(input2[0], {
-      onlyCountries: ['kr', chinaCountryCode, 'ru', albaniaCountryCode],
+      onlyCountries: [albaniaCountryCode, chinaCountryCode, koreaCountryCode, russiaCountryCode],
       nationalMode: false,
     });
     $("body").append(getParentElement(input)).append(getParentElement(input2));
@@ -45,8 +46,8 @@ describe("multiple instances: init plugin (with nationalMode=false) to test mult
 
   it("selecting an item from the first input dropdown only updates the flag on that input", function() {
     selectFlag(chinaCountryCode);
-    expect(getInputVal()).toEqual(chinaDialCode);
-    expect(getInputVal(input2)).toEqual("");
+    expect(getSelectedFlagElement()).toHaveClass(`iti__${chinaCountryCode}`);
+    expect(getSelectedFlagElement(input2)).toHaveClass(`iti__${albaniaCountryCode}`);
   });
 
   it("updating the number on the first input only updates the flag on that input", function() {

package/src/spec/tests/core/usingDropdown.js

@@ -1,13 +1,14 @@
 "use strict";
 
-describe("using dropdown: init plugin with nationalMode=false", function() {
+describe("using dropdown: init plugin on normal input with nationalMode=false, autoInsertDialCode=true", function() {
 
   beforeEach(function() {
     intlSetup();
     input = $("<input>").appendTo("body");
-    // nationalMode=false because we're playing with dial codes
+    // nationalMode=false and autoInsertDialCode=true because we're playing with dial codes
     iti = window.intlTelInput(input[0], {
-      nationalMode: false
+      nationalMode: false,
+      autoInsertDialCode: true,
     });
   });
 
@@ -15,19 +16,16 @@ describe("using dropdown: init plugin with nationalMode=false", function() {
     intlTeardown();
   });
 
-  it("normal input: clicking the selected flag opens the dropdown", function() {
+  it("clicking the selected flag opens the dropdown", function() {
     getSelectedFlagContainer()[0].click();
     expect(getListElement()).toBeVisible();
   });
 
-  it("disabled input: clicking the selected flag does not open the dropdown", function() {
-    input.prop("disabled", true);
-    getSelectedFlagContainer()[0].click();
-    expect(getListElement()).not.toBeVisible();
+  it("allows focusing the dropdown using the keyboard", function() {
+    expect(getSelectedFlagContainer().attr('tabindex')).toEqual('0');
+    expect(getSelectedFlagContainer()).not.toHaveAttr('aria-disabled');
   });
 
-
-
   describe("clicking the selected flag to open the dropdown", function() {
 
     beforeEach(function() {
@@ -79,3 +77,25 @@ describe("using dropdown: init plugin with nationalMode=false", function() {
   });
 
 });
+
+describe("using dropdown: disabled input", () => {
+  beforeEach(function() {
+    intlSetup();
+    input = $("<input disabled>").appendTo("body");
+    iti = window.intlTelInput(input[0]);
+  });
+
+  afterEach(function() {
+    intlTeardown();
+  });
+
+  it("prevents the user from opening the dropdown using the keyboard", function() {
+    expect(getSelectedFlagContainer()).not.toHaveAttr('tabindex');
+    expect(getSelectedFlagContainer().attr('aria-disabled')).toEqual('true');
+  });
+
+  it("clicking the selected flag does not open the dropdown", function() {
+    getSelectedFlagContainer()[0].click();
+    expect(getListElement()).not.toBeVisible();
+  });
+})

package/src/spec/tests/methods/destroy.js

@@ -52,14 +52,14 @@ describe("destroy: init plugin to test public method destroy", function() {
 
 
 
-describe("destroy: init plugin with nationalMode=false and autoHideDialCode=true", function() {
+describe("destroy: init plugin with nationalMode=false and autoInsertDialCode=true", function() {
 
   beforeEach(function() {
     intlSetup();
     input = $("<input>").wrap("div");
     iti = window.intlTelInput(input[0], {
       nationalMode: false,
-      autoHideDialCode: true
+      autoInsertDialCode: true
     });
   });
 

package/src/spec/tests/options/allowDropdown.js

@@ -24,6 +24,10 @@ describe("allowDropdown:", function() {
       expect(getListElement()).not.toExist();
     });
 
+    if("Should not add role[combox]", function() {
+      expect(getSelectedFlagContainer()).not.toHaveAttr("role", "combobox");
+    });
+
     it("typing a different dial code updates the flag", function() {
       input.val("+4");
       triggerKeyOnInput("4");
@@ -60,6 +64,10 @@ describe("allowDropdown:", function() {
       });
     });
 
+    if("Should have role[combox]", function() {
+      expect(getSelectedFlagContainer()).toHaveAttr("role", "combobox");
+    });
+
     it("shows the arrow and generate the dropdown markup", function() {
       expect(getSelectedFlagContainer().find(".iti__arrow")).toExist();
       expect(getListElement()).toExist();

package/src/spec/tests/options/{autoHideDialCode.js → autoInsertDialCode.js}

@@ -1,6 +1,6 @@
 "use strict";
 
-describe("autoHideDialCode option:", function() {
+describe("autoInsertDialCode option:", function() {
 
   var defaultDialCode = "+1";
 
@@ -16,16 +16,21 @@ describe("autoHideDialCode option:", function() {
   });
 
 
-  describe("init plugin with autoHideDialCode=true and nationalMode=false", function() {
+  describe("init plugin with autoInsertDialCode=true and nationalMode=false", function() {
 
     beforeEach(function() {
       iti = window.intlTelInput(input[0], {
-        autoHideDialCode: true,
+        autoInsertDialCode: true,
         nationalMode: false
       });
     });
 
-    it("does not automatically insert the default dial code", function() {
+    it("automatically inserts the default dial code", function() {
+      expect(getInputVal()).toEqual(defaultDialCode);
+    });
+
+    it("blurring the input removes it", function() {
+      triggerInputEvent("blur");
       expect(getInputVal()).toEqual("");
     });
 
@@ -56,9 +61,7 @@ describe("autoHideDialCode option:", function() {
         input.val(number);
       });
 
-      it("focusing and blurring the input doesn't change it", function() {
-        triggerInputEvent("focus");
-        expect(getInputVal()).toEqual(number);
+      it("blurring the input doesn't change it", function() {
         triggerInputEvent("blur");
         expect(getInputVal()).toEqual(number);
       });
@@ -68,40 +71,27 @@ describe("autoHideDialCode option:", function() {
   });
 
 
-  describe("init plugin with autoHideDialCode=false and nationalMode=false", function() {
+  describe("init plugin with autoInsertDialCode=false and nationalMode=false", function() {
 
     beforeEach(function() {
       iti = window.intlTelInput(input[0], {
-        autoHideDialCode: false,
+        autoInsertDialCode: false,
         nationalMode: false
       });
     });
 
-    it("automatically inserts the default dial code", function() {
-      expect(getInputVal()).toEqual(defaultDialCode);
-    });
-
-    it("focusing and bluring the input dont change the val", function() {
-      triggerInputEvent("focus");
-      expect(getInputVal()).toEqual(defaultDialCode);
-      triggerInputEvent("blur");
-      expect(getInputVal()).toEqual(defaultDialCode);
+    it("does not automatically insert the default dial code", function() {
+      expect(getInputVal()).toEqual("");
     });
 
-
-    describe("with a phone number", function() {
-
-      var number = "+1 702 987 2345";
+    describe("selecting a country", function() {
 
       beforeEach(function() {
-        input.val(number);
+        selectFlag("gb");
       });
 
-      it("focusing and blurring the input doesn't change it", function() {
-        triggerInputEvent("focus");
-        expect(getInputVal()).toEqual(number);
-        triggerInputEvent("blur");
-        expect(getInputVal()).toEqual(number);
+      it("does not add the dial code", function() {
+        expect(getInputVal()).toEqual("");
       });
 
     });

package/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",
       });
     });