intl-tel-input 17.0.21 → 18.0.0

package/examples/gen/multiple-instances.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: Multiple Instances</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1678446285328">
-    <link rel="stylesheet" href="../../build/css/demo.css?1678446285328">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -36,12 +36,12 @@ var inputMobile = document.querySelector(&quot;#mobile&quot;);
 window.intlTelInput(inputHome, {
   initialCountry: &#39;gb&#39;,
   placeholderNumberType: &#39;FIXED_LINE&#39;,
-  utilsScript: &quot;../../build/js/utils.js?1678446285328&quot; // just for formatting/placeholders etc
+  utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
 });
 window.intlTelInput(inputMobile, {
   initialCountry: &#39;gb&#39;,
   placeholderNumberType: &#39;MOBILE&#39;,
-  utilsScript: &quot;../../build/js/utils.js?1678446285328&quot;
+  utilsScript: &quot;../../build/js/utils.js?1680898893466&quot;
 });
 </code></pre>
 
@@ -54,7 +54,7 @@ Mobile: <input id="mobile" type="tel">
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1678446285328"></script>
-    <script src="./js/multipleInstances.js?1678446285328"></script>
+    <script src="../../build/js/intlTelInput.js?1680898893466"></script>
+    <script src="./js/multipleInstances.js?1680898893466"></script>
   </body>
 </html>

package/examples/gen/national-mode.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: National Mode</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1678446285328">
-    <link rel="stylesheet" href="../../build/css/demo.css?1678446285328">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -34,7 +34,7 @@
 
 var iti = window.intlTelInput(input, {
   nationalMode: true,
-  utilsScript: &quot;../../build/js/utils.js?1678446285328&quot; // just for formatting/placeholders etc
+  utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
 });
 
 var handleChange = function() {
@@ -57,7 +57,7 @@ input.addEventListener(&#39;keyup&#39;, handleChange);
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1678446285328"></script>
-    <script src="./js/nationalMode.js?1678446285328"></script>
+    <script src="../../build/js/intlTelInput.js?1680898893466"></script>
+    <script src="./js/nationalMode.js?1680898893466"></script>
   </body>
 </html>

package/examples/gen/only-countries-europe.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Example: European countries</title>
     <link rel="stylesheet" href="../css/prism.css">
-    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1678446285328">
-    <link rel="stylesheet" href="../../build/css/demo.css?1678446285328">
+    <link rel="stylesheet" href="../../build/css/intlTelInput.css?1680898893466">
+    <link rel="stylesheet" href="../../build/css/demo.css?1680898893466">
     
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -33,7 +33,7 @@ window.intlTelInput(input, {
   &quot;ee&quot;, &quot;fo&quot;, &quot;fi&quot;, &quot;fr&quot;, &quot;de&quot;, &quot;gi&quot;, &quot;gr&quot;, &quot;va&quot;, &quot;hu&quot;, &quot;is&quot;, &quot;ie&quot;, &quot;it&quot;, &quot;lv&quot;,
   &quot;li&quot;, &quot;lt&quot;, &quot;lu&quot;, &quot;mk&quot;, &quot;mt&quot;, &quot;md&quot;, &quot;mc&quot;, &quot;me&quot;, &quot;nl&quot;, &quot;no&quot;, &quot;pl&quot;, &quot;pt&quot;, &quot;ro&quot;,
   &quot;ru&quot;, &quot;sm&quot;, &quot;rs&quot;, &quot;sk&quot;, &quot;si&quot;, &quot;es&quot;, &quot;se&quot;, &quot;ch&quot;, &quot;ua&quot;, &quot;gb&quot;],
-  utilsScript: &quot;../../build/js/utils.js?1678446285328&quot; // just for formatting/placeholders etc
+  utilsScript: &quot;../../build/js/utils.js?1680898893466&quot; // just for formatting/placeholders etc
 });
 </code></pre>
 
@@ -43,7 +43,7 @@ window.intlTelInput(input, {
     </div>
 
     <script src="../js/prism.js"></script>
-    <script src="../../build/js/intlTelInput.js?1678446285328"></script>
-    <script src="./js/onlyCountriesEurope.js?1678446285328"></script>
+    <script src="../../build/js/intlTelInput.js?1680898893466"></script>
+    <script src="./js/onlyCountriesEurope.js?1680898893466"></script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intl-tel-input",
-  "version": "17.0.21",
+  "version": "18.0.0",
   "description": "A JavaScript plugin for entering and validating international telephone numbers",
   "keywords": [
     "international",

package/spec.html

@@ -70,7 +70,7 @@
   
   <script src="src/spec/tests/options/allowDropdown.js"></script>
   
-  <script src="src/spec/tests/options/autoHideDialCode.js"></script>
+  <script src="src/spec/tests/options/autoInsertDialCode.js"></script>
   
   <script src="src/spec/tests/options/autoPlaceholder.js"></script>
   

package/src/css/intlTelInput.scss

@@ -44,7 +44,6 @@ $mobilePopupMargin: 30px !default;
   // http://www.paulirish.com/2012/box-sizing-border-box-ftw/
   * {
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
   }
 
   &__hide {
@@ -111,6 +110,11 @@ $mobilePopupMargin: 30px !default;
     border-right: $triangleBorder solid transparent;
     border-top: $arrowHeight solid $arrowColor;
 
+    [dir=rtl] & {
+      margin-right: $arrowPadding;
+      margin-left: 0;
+    }
+
     &--up {
       border-top: none;
       border-bottom: $arrowHeight solid $arrowColor;
@@ -125,8 +129,6 @@ $mobilePopupMargin: 30px !default;
 
     // override default list styles
     list-style: none;
-    // in case any container has text-align:center
-    text-align: left;
 
     // place menu above the input element
     &--dropup {
@@ -175,6 +177,8 @@ $mobilePopupMargin: 30px !default;
   // each country item in dropdown (we must have separate class to differentiate from dividers)
   &__country {
     // Note: decided not to use line-height here for alignment because it causes issues e.g. large font-sizes will overlap, and also looks bad if one country overflows onto 2 lines
+    display: flex;
+    align-items: center;
     padding: 5px 10px;
     outline: none;
   }
@@ -188,11 +192,13 @@ $mobilePopupMargin: 30px !default;
   }
 
   // spacing between country flag, name and dial code
-  &__flag-box, &__country-name, &__dial-code {
-    vertical-align: middle;
-  }
   &__flag-box, &__country-name {
     margin-right: 6px;
+
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: 6px;
+    }
   }
 
   // these settings are independent of each other, but both move selected flag to left of input
@@ -201,10 +207,21 @@ $mobilePopupMargin: 30px !default;
       padding-right: $inputPadding;
       padding-left: $selectedFlagArrowWidth + $inputPadding;
       margin-left: 0;
+
+      [dir=rtl] & {
+        padding-right: $selectedFlagArrowWidth + $inputPadding;
+        padding-left: $inputPadding;
+        margin-right: 0;
+      }
     }
     .iti__flag-container {
       right: auto;
       left: 0;
+
+      [dir=rtl] & {
+        right: 0;
+        left: auto;
+      }
     }
   }
 

package/src/js/data.js

@@ -220,7 +220,7 @@ var allCountries = [
     "ca",
     "1",
     1,
-    ["204", "226", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
+    ["204", "226", "236", "249", "250", "289", "306", "343", "365", "367", "368", "387", "403", "416", "418", "431", "437", "438", "450", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905"]
   ],
   [
     "Cape Verde (Kabu Verdi)",

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();