Support separateDialCode=true and allowDropdown=false

jackocnr · Aug 23, 2024 · 1bd7507 · 1bd7507
1 parent b967582
commit 1bd7507
Show file tree

Hide file tree

Showing 18 changed files with 316 additions and 310 deletions.
diff --git a/README.md b/README.md
@@ -321,7 +321,7 @@ Set this to false to hide the flags e.g. for political reasons. Instead, it will
 
 **separateDialCode**  
 Type: `Boolean` Default: `false`  
-Display the selected country's international dial code next to the input, so it looks like it's part of the typed number. Since the user cannot edit the displayed dial code, they may try to type a new one - in this case, to avoid having two dial codes next to each other, we automatically open the country dropdown and put the new dial code in the search input instead. So if they type +54, then Argentina will be highlighted in the dropdown and they can simply press Enter to select it, updating the displayed dial code. For this reason, we force `allowDropdown` to `true`. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--separatedialcode) (using the React component).
+Display the selected country's international dial code next to the input, so it looks like it's part of the typed number. Since the user cannot edit the displayed dial code, they may try to type a new one - in this case, to avoid having two dial codes next to each other, we automatically open the country dropdown and put the new dial code in the search input instead. So if they type +54, then Argentina will be highlighted in the dropdown and they can simply press Enter to select it, updating the displayed dial code. Play with this option on [Storybook](https://intl-tel-input.com/storybook/?path=/docs/intltelinput--separatedialcode) (using the React component).
 
 <img src="https://raw.github.com/jackocnr/intl-tel-input/master/screenshots/separate-dial-code4.png" width="267px" height="51px" alt="Separate Dial Code">
 

diff --git a/build/js/intlTelInput.d.ts b/build/js/intlTelInput.d.ts
@@ -420,6 +420,7 @@ declare module "intl-tel-input" {
         private _initDropdownListeners;
         private _initRequests;
         private _loadAutoCountry;
+        private _openDropdownWithPlus;
         private _initTelInputListeners;
         private _cap;
         private _trigger;

diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -1767,7 +1767,6 @@ var factoryOutput = (() => {
         this.options.initialCountry = this.options.onlyCountries[0];
       }
       if (this.options.separateDialCode) {
-        this.options.allowDropdown = true;
         this.options.nationalMode = false;
         this.options.countrySearch = true;
       }
@@ -1779,6 +1778,8 @@ var factoryOutput = (() => {
       }
       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;
@@ -1940,10 +1941,9 @@ var factoryOutput = (() => {
       if (!useFullscreenPopup) {
         parentClass += " iti--inline-dropdown";
       }
-      this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
       const wrapper = createEl("div", { class: parentClass });
       this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-      if (allowDropdown || showFlags) {
+      if (allowDropdown || showFlags || separateDialCode) {
         this.countryContainer = createEl(
           "div",
           {
@@ -2241,25 +2241,25 @@ var factoryOutput = (() => {
         }
       }
     }
+    _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)) {
@@ -2288,15 +2288,15 @@ var factoryOutput = (() => {
       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;

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/build/js/intlTelInputWithUtils.js b/build/js/intlTelInputWithUtils.js
@@ -1766,7 +1766,6 @@ var factoryOutput = (() => {
         this.options.initialCountry = this.options.onlyCountries[0];
       }
       if (this.options.separateDialCode) {
-        this.options.allowDropdown = true;
         this.options.nationalMode = false;
         this.options.countrySearch = true;
       }
@@ -1778,6 +1777,8 @@ var factoryOutput = (() => {
       }
       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;
@@ -1939,10 +1940,9 @@ var factoryOutput = (() => {
       if (!useFullscreenPopup) {
         parentClass += " iti--inline-dropdown";
       }
-      this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
       const wrapper = createEl("div", { class: parentClass });
       this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-      if (allowDropdown || showFlags) {
+      if (allowDropdown || showFlags || separateDialCode) {
         this.countryContainer = createEl(
           "div",
           {
@@ -2240,25 +2240,25 @@ var factoryOutput = (() => {
         }
       }
     }
+    _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)) {
@@ -2287,15 +2287,15 @@ var factoryOutput = (() => {
       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;

diff --git a/build/js/intlTelInputWithUtils.min.js b/build/js/intlTelInputWithUtils.min.js
diff --git a/react/build/IntlTelInput.cjs b/react/build/IntlTelInput.cjs
@@ -1762,7 +1762,6 @@ var Iti = class {
       this.options.initialCountry = this.options.onlyCountries[0];
     }
     if (this.options.separateDialCode) {
-      this.options.allowDropdown = true;
       this.options.nationalMode = false;
       this.options.countrySearch = true;
     }
@@ -1774,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;
@@ -1935,10 +1936,9 @@ var Iti = class {
     if (!useFullscreenPopup) {
       parentClass += " iti--inline-dropdown";
     }
-    this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-    if (allowDropdown || showFlags) {
+    if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
         {
@@ -2236,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)) {
@@ -2283,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;

diff --git a/react/build/IntlTelInput.d.ts b/react/build/IntlTelInput.d.ts
@@ -420,6 +420,7 @@ declare module "intl-tel-input" {
         private _initDropdownListeners;
         private _initRequests;
         private _loadAutoCountry;
+        private _openDropdownWithPlus;
         private _initTelInputListeners;
         private _cap;
         private _trigger;

diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -1726,7 +1726,6 @@ var Iti = class {
       this.options.initialCountry = this.options.onlyCountries[0];
     }
     if (this.options.separateDialCode) {
-      this.options.allowDropdown = true;
       this.options.nationalMode = false;
       this.options.countrySearch = true;
     }
@@ -1738,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;
@@ -1899,10 +1900,9 @@ var Iti = class {
     if (!useFullscreenPopup) {
       parentClass += " iti--inline-dropdown";
     }
-    this.showSelectedCountryOnLeft = allowDropdown && !this.isRTL || !allowDropdown && this.isRTL;
     const wrapper = createEl("div", { class: parentClass });
     this.telInput.parentNode?.insertBefore(wrapper, this.telInput);
-    if (allowDropdown || showFlags) {
+    if (allowDropdown || showFlags || separateDialCode) {
       this.countryContainer = createEl(
         "div",
         {
@@ -2200,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)) {
@@ -2247,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;