intl-tel-input 24.2.1 → 24.3.0

package/package.json

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

package/react/README.md

@@ -29,7 +29,7 @@ import "intl-tel-input/styles";
 
 See the [Validation demo](https://github.com/jackocnr/intl-tel-input/blob/master/react/demo/ValidationApp.tsx) for a more fleshed-out example of how to handle validation.
 
-A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"` instead, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.2.1/build/js/utils.js"`.
+A note on the utils script (~260KB): if you're lazy loading the IntlTelInput chunk (and so less worried about filesize) then you can just import IntlTelInput from `"intl-tel-input/reactWithUtils"` instead, to include the utils script. Alternatively, if you use the main `"intl-tel-input/react"` import, then you should couple this with the `utilsScript` initialisation option - you will need to host the [utils.js](https://github.com/jackocnr/intl-tel-input/blob/master/build/js/utils.js) file, and then set the `utilsScript` option to that URL, or alternatively just point it to a CDN hosted version e.g. `"https://cdn.jsdelivr.net/npm/intl-tel-input@24.3.0/build/js/utils.js"`.
 
 ## Props
 Here's a list of all of the current props you can pass to the IntlTelInput react component.

package/react/build/IntlTelInput.cjs

@@ -1758,8 +1758,10 @@ var Iti = class {
     if (this.options.useFullscreenPopup) {
       this.options.fixDropdownWidth = false;
     }
+    if (this.options.onlyCountries.length === 1) {
+      this.options.initialCountry = this.options.onlyCountries[0];
+    }
     if (this.options.separateDialCode) {
-      this.options.allowDropdown = true;
       this.options.nationalMode = false;
       this.options.countrySearch = true;
     }
@@ -1771,6 +1773,8 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
+    this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
       if (this.isRTL) {
         this.originalPaddingRight = this.telInput.style.paddingRight;
@@ -1934,10 +1938,13 @@ var Iti = class {
     }
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-    if (allowDropdown || showFlags) {
+    if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        {
+          class: "iti__country-container",
+          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+        },
         wrapper
       );
       if (allowDropdown) {
@@ -2042,6 +2049,7 @@ var Iti = class {
       }
     }
     wrapper.appendChild(this.telInput);
+    this._updateInputPadding();
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2228,25 +2236,25 @@ var Iti = class {
       }
     }
   }
+  _openDropdownWithPlus() {
+    this._openDropdown();
+    this.searchInput.value = "+";
+    this._filterCountries("", true);
+  }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
     }
-    const openDropdownWithPlus = () => {
-      this._openDropdown();
-      this.searchInput.value = "+";
-      this._filterCountries("", true);
-    };
     this._handleInputEvent = (e) => {
-      if (this.isAndroid && e?.data === "+" && separateDialCode) {
+      if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos - 1);
         const valueAfterCaret = this.telInput.value.substring(currentCaretPos);
         this.telInput.value = valueBeforeCaret + valueAfterCaret;
-        openDropdownWithPlus();
+        this._openDropdownWithPlus();
         return;
       }
       if (this._updateCountryFromNumber(this.telInput.value)) {
@@ -2275,15 +2283,15 @@ var Iti = class {
     if (strictMode || separateDialCode) {
       this._handleKeydownEvent = (e) => {
         if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-          if (separateDialCode && e.key === "+") {
+          if (separateDialCode && allowDropdown && e.key === "+") {
             e.preventDefault();
-            openDropdownWithPlus();
+            this._openDropdownWithPlus();
             return;
           }
           if (strictMode) {
             const isInitialPlus = this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
-            const isAllowedChar = isInitialPlus || isNumeric;
+            const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
             const fullNumber = this._getFullNumber();
             const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
             const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
@@ -2618,18 +2626,22 @@ var Iti = class {
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-      const inputPadding = selectedCountryWidth + 8;
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      }
+      this._updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevCountry.iso2 !== iso2;
   }
+  //* Update the input padding to make space for the selected country/dial code.
+  _updateInputPadding() {
+    const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+    const inputPadding = selectedCountryWidth + 6;
+    if (this.showSelectedCountryOnLeft) {
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    } else {
+      this.telInput.style.paddingRight = `${inputPadding}px`;
+    }
+  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
@@ -3079,7 +3091,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.2.1"
+    version: "24.3.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInput.d.ts

@@ -364,6 +364,7 @@ declare module "intl-tel-input" {
         private options;
         private hadInitialPlaceholder;
         private isRTL;
+        private showSelectedCountryOnLeft;
         private isAndroid;
         private selectedCountryData;
         private countries;
@@ -419,6 +420,7 @@ declare module "intl-tel-input" {
         private _initDropdownListeners;
         private _initRequests;
         private _loadAutoCountry;
+        private _openDropdownWithPlus;
         private _initTelInputListeners;
         private _cap;
         private _trigger;
@@ -435,6 +437,7 @@ declare module "intl-tel-input" {
         private _highlightListItem;
         private _getCountryData;
         private _setCountry;
+        private _updateInputPadding;
         private _updateMaxLength;
         private _setSelectedCountryTitleAttribute;
         private _getHiddenSelectedCountryWidth;

package/react/build/IntlTelInput.js

@@ -1722,8 +1722,10 @@ var Iti = class {
     if (this.options.useFullscreenPopup) {
       this.options.fixDropdownWidth = false;
     }
+    if (this.options.onlyCountries.length === 1) {
+      this.options.initialCountry = this.options.onlyCountries[0];
+    }
     if (this.options.separateDialCode) {
-      this.options.allowDropdown = true;
       this.options.nationalMode = false;
       this.options.countrySearch = true;
     }
@@ -1735,6 +1737,8 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
+    this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
       if (this.isRTL) {
         this.originalPaddingRight = this.telInput.style.paddingRight;
@@ -1898,10 +1902,13 @@ var Iti = class {
     }
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-    if (allowDropdown || showFlags) {
+    if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        {
+          class: "iti__country-container",
+          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+        },
         wrapper
       );
       if (allowDropdown) {
@@ -2006,6 +2013,7 @@ var Iti = class {
       }
     }
     wrapper.appendChild(this.telInput);
+    this._updateInputPadding();
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2192,25 +2200,25 @@ var Iti = class {
       }
     }
   }
+  _openDropdownWithPlus() {
+    this._openDropdown();
+    this.searchInput.value = "+";
+    this._filterCountries("", true);
+  }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
     }
-    const openDropdownWithPlus = () => {
-      this._openDropdown();
-      this.searchInput.value = "+";
-      this._filterCountries("", true);
-    };
     this._handleInputEvent = (e) => {
-      if (this.isAndroid && e?.data === "+" && separateDialCode) {
+      if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos - 1);
         const valueAfterCaret = this.telInput.value.substring(currentCaretPos);
         this.telInput.value = valueBeforeCaret + valueAfterCaret;
-        openDropdownWithPlus();
+        this._openDropdownWithPlus();
         return;
       }
       if (this._updateCountryFromNumber(this.telInput.value)) {
@@ -2239,15 +2247,15 @@ var Iti = class {
     if (strictMode || separateDialCode) {
       this._handleKeydownEvent = (e) => {
         if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-          if (separateDialCode && e.key === "+") {
+          if (separateDialCode && allowDropdown && e.key === "+") {
             e.preventDefault();
-            openDropdownWithPlus();
+            this._openDropdownWithPlus();
             return;
           }
           if (strictMode) {
             const isInitialPlus = this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
-            const isAllowedChar = isInitialPlus || isNumeric;
+            const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
             const fullNumber = this._getFullNumber();
             const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
             const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
@@ -2582,18 +2590,22 @@ var Iti = class {
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-      const inputPadding = selectedCountryWidth + 8;
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      }
+      this._updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevCountry.iso2 !== iso2;
   }
+  //* Update the input padding to make space for the selected country/dial code.
+  _updateInputPadding() {
+    const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+    const inputPadding = selectedCountryWidth + 6;
+    if (this.showSelectedCountryOnLeft) {
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    } else {
+      this.telInput.style.paddingRight = `${inputPadding}px`;
+    }
+  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
@@ -3043,7 +3055,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.2.1"
+    version: "24.3.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.cjs

@@ -1758,8 +1758,10 @@ var Iti = class {
     if (this.options.useFullscreenPopup) {
       this.options.fixDropdownWidth = false;
     }
+    if (this.options.onlyCountries.length === 1) {
+      this.options.initialCountry = this.options.onlyCountries[0];
+    }
     if (this.options.separateDialCode) {
-      this.options.allowDropdown = true;
       this.options.nationalMode = false;
       this.options.countrySearch = true;
     }
@@ -1771,6 +1773,8 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
+    this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
       if (this.isRTL) {
         this.originalPaddingRight = this.telInput.style.paddingRight;
@@ -1934,10 +1938,13 @@ var Iti = class {
     }
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-    if (allowDropdown || showFlags) {
+    if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        {
+          class: "iti__country-container",
+          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+        },
         wrapper
       );
       if (allowDropdown) {
@@ -2042,6 +2049,7 @@ var Iti = class {
       }
     }
     wrapper.appendChild(this.telInput);
+    this._updateInputPadding();
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2228,25 +2236,25 @@ var Iti = class {
       }
     }
   }
+  _openDropdownWithPlus() {
+    this._openDropdown();
+    this.searchInput.value = "+";
+    this._filterCountries("", true);
+  }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
     }
-    const openDropdownWithPlus = () => {
-      this._openDropdown();
-      this.searchInput.value = "+";
-      this._filterCountries("", true);
-    };
     this._handleInputEvent = (e) => {
-      if (this.isAndroid && e?.data === "+" && separateDialCode) {
+      if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos - 1);
         const valueAfterCaret = this.telInput.value.substring(currentCaretPos);
         this.telInput.value = valueBeforeCaret + valueAfterCaret;
-        openDropdownWithPlus();
+        this._openDropdownWithPlus();
         return;
       }
       if (this._updateCountryFromNumber(this.telInput.value)) {
@@ -2275,15 +2283,15 @@ var Iti = class {
     if (strictMode || separateDialCode) {
       this._handleKeydownEvent = (e) => {
         if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-          if (separateDialCode && e.key === "+") {
+          if (separateDialCode && allowDropdown && e.key === "+") {
             e.preventDefault();
-            openDropdownWithPlus();
+            this._openDropdownWithPlus();
             return;
           }
           if (strictMode) {
             const isInitialPlus = this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
-            const isAllowedChar = isInitialPlus || isNumeric;
+            const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
             const fullNumber = this._getFullNumber();
             const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
             const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
@@ -2618,18 +2626,22 @@ var Iti = class {
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-      const inputPadding = selectedCountryWidth + 8;
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      }
+      this._updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevCountry.iso2 !== iso2;
   }
+  //* Update the input padding to make space for the selected country/dial code.
+  _updateInputPadding() {
+    const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+    const inputPadding = selectedCountryWidth + 6;
+    if (this.showSelectedCountryOnLeft) {
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    } else {
+      this.telInput.style.paddingRight = `${inputPadding}px`;
+    }
+  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
@@ -3079,7 +3091,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.2.1"
+    version: "24.3.0"
   }
 );
 var intl_tel_input_default = intlTelInput;

package/react/build/IntlTelInputWithUtils.js

@@ -1722,8 +1722,10 @@ var Iti = class {
     if (this.options.useFullscreenPopup) {
       this.options.fixDropdownWidth = false;
     }
+    if (this.options.onlyCountries.length === 1) {
+      this.options.initialCountry = this.options.onlyCountries[0];
+    }
     if (this.options.separateDialCode) {
-      this.options.allowDropdown = true;
       this.options.nationalMode = false;
       this.options.countrySearch = true;
     }
@@ -1735,6 +1737,8 @@ var Iti = class {
     }
     this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
+    const showOnDefaultSide = this.options.allowDropdown || this.options.separateDialCode;
+    this.showSelectedCountryOnLeft = this.isRTL ? !showOnDefaultSide : showOnDefaultSide;
     if (this.options.separateDialCode) {
       if (this.isRTL) {
         this.originalPaddingRight = this.telInput.style.paddingRight;
@@ -1898,10 +1902,13 @@ var Iti = class {
     }
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-    if (allowDropdown || showFlags) {
+    if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
-        { class: "iti__country-container" },
+        {
+          class: "iti__country-container",
+          style: this.showSelectedCountryOnLeft ? "left: 0" : "right: 0"
+        },
         wrapper
       );
       if (allowDropdown) {
@@ -2006,6 +2013,7 @@ var Iti = class {
       }
     }
     wrapper.appendChild(this.telInput);
+    this._updateInputPadding();
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name") || "";
       const names = hiddenInput(telInputName);
@@ -2192,25 +2200,25 @@ var Iti = class {
       }
     }
   }
+  _openDropdownWithPlus() {
+    this._openDropdown();
+    this.searchInput.value = "+";
+    this._filterCountries("", true);
+  }
   //* Initialize the tel input listeners.
   _initTelInputListeners() {
-    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
+    const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay, allowDropdown } = this.options;
     let userOverrideFormatting = false;
     if (/\p{L}/u.test(this.telInput.value)) {
       userOverrideFormatting = true;
     }
-    const openDropdownWithPlus = () => {
-      this._openDropdown();
-      this.searchInput.value = "+";
-      this._filterCountries("", true);
-    };
     this._handleInputEvent = (e) => {
-      if (this.isAndroid && e?.data === "+" && separateDialCode) {
+      if (this.isAndroid && e?.data === "+" && separateDialCode && allowDropdown) {
         const currentCaretPos = this.telInput.selectionStart || 0;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos - 1);
         const valueAfterCaret = this.telInput.value.substring(currentCaretPos);
         this.telInput.value = valueBeforeCaret + valueAfterCaret;
-        openDropdownWithPlus();
+        this._openDropdownWithPlus();
         return;
       }
       if (this._updateCountryFromNumber(this.telInput.value)) {
@@ -2239,15 +2247,15 @@ var Iti = class {
     if (strictMode || separateDialCode) {
       this._handleKeydownEvent = (e) => {
         if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-          if (separateDialCode && e.key === "+") {
+          if (separateDialCode && allowDropdown && e.key === "+") {
             e.preventDefault();
-            openDropdownWithPlus();
+            this._openDropdownWithPlus();
             return;
           }
           if (strictMode) {
             const isInitialPlus = this.telInput.selectionStart === 0 && e.key === "+";
             const isNumeric = /^[0-9]$/.test(e.key);
-            const isAllowedChar = isInitialPlus || isNumeric;
+            const isAllowedChar = separateDialCode ? isNumeric : isInitialPlus || isNumeric;
             const fullNumber = this._getFullNumber();
             const coreNumber = intlTelInput.utils.getCoreNumber(fullNumber, this.selectedCountryData.iso2);
             const hasReachedMaxLength = this.maxCoreNumberLength && coreNumber.length >= this.maxCoreNumberLength;
@@ -2582,18 +2590,22 @@ var Iti = class {
     if (separateDialCode) {
       const dialCode = this.selectedCountryData.dialCode ? `+${this.selectedCountryData.dialCode}` : "";
       this.selectedDialCode.innerHTML = dialCode;
-      const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
-      const inputPadding = selectedCountryWidth + 8;
-      if (this.isRTL) {
-        this.telInput.style.paddingRight = `${inputPadding}px`;
-      } else {
-        this.telInput.style.paddingLeft = `${inputPadding}px`;
-      }
+      this._updateInputPadding();
     }
     this._updatePlaceholder();
     this._updateMaxLength();
     return prevCountry.iso2 !== iso2;
   }
+  //* Update the input padding to make space for the selected country/dial code.
+  _updateInputPadding() {
+    const selectedCountryWidth = this.selectedCountry.offsetWidth || this._getHiddenSelectedCountryWidth();
+    const inputPadding = selectedCountryWidth + 6;
+    if (this.showSelectedCountryOnLeft) {
+      this.telInput.style.paddingLeft = `${inputPadding}px`;
+    } else {
+      this.telInput.style.paddingRight = `${inputPadding}px`;
+    }
+  }
   //* Update the maximum valid number length for the currently selected country.
   _updateMaxLength() {
     const { strictMode, placeholderNumberType, validationNumberType } = this.options;
@@ -3043,7 +3055,7 @@ var intlTelInput = Object.assign(
     //* A map from instance ID to instance object.
     instances: {},
     loadUtils,
-    version: "24.2.1"
+    version: "24.3.0"
   }
 );
 var intl_tel_input_default = intlTelInput;