Android fix separateDialCode plus issue. Closes #1655

jackocnr · Jun 13, 2024 · 3691b21 · 3691b21
1 parent dfa5cb4
commit 3691b21
Show file tree

Hide file tree

Showing 14 changed files with 1,542 additions and 1,082 deletions.
diff --git a/build/js/intlTelInput.d.ts b/build/js/intlTelInput.d.ts
@@ -875,6 +875,7 @@ declare module "intl-tel-input" {
         private options;
         private hadInitialPlaceholder;
         private isRTL;
+        private isAndroid;
         private selectedCountryData;
         private countries;
         private dialCodeMaxLen;

diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -1519,6 +1519,7 @@ var factoryOutput = (() => {
     options;
     hadInitialPlaceholder;
     isRTL;
+    isAndroid;
     selectedCountryData;
     countries;
     dialCodeMaxLen;
@@ -1577,6 +1578,7 @@ var factoryOutput = (() => {
       if (this.options.useFullscreenPopup && !this.options.dropdownContainer) {
         this.options.dropdownContainer = document.body;
       }
+      this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
       this.isRTL = !!this.telInput.closest("[dir=rtl]");
       this.options.i18n = { ...en_default, ...this.options.i18n };
       const autoCountryPromise = new Promise((resolve, reject) => {
@@ -2027,7 +2029,20 @@ var factoryOutput = (() => {
     _initTelInputListeners() {
       const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
       let userOverrideFormatting = false;
+      const openDropdownWithPlus = () => {
+        this._openDropdown();
+        this.searchInput.value = "+";
+        this._filterCountries("", true);
+      };
       this._handleInputEvent = (e) => {
+        if (this.isAndroid && e?.data === "+" && separateDialCode) {
+          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();
+          return;
+        }
         if (this._updateCountryFromNumber(this.telInput.value)) {
           this._triggerCountryChange();
         }
@@ -2056,9 +2071,7 @@ var factoryOutput = (() => {
           if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
             if (separateDialCode && e.key === "+") {
               e.preventDefault();
-              this._openDropdown();
-              this.searchInput.value = "+";
-              this._filterCountries("", true);
+              openDropdownWithPlus();
               return;
             }
             if (strictMode) {

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
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
@@ -1514,6 +1514,7 @@ var Iti = class {
   options;
   hadInitialPlaceholder;
   isRTL;
+  isAndroid;
   selectedCountryData;
   countries;
   dialCodeMaxLen;
@@ -1572,6 +1573,7 @@ var Iti = class {
     if (this.options.useFullscreenPopup && !this.options.dropdownContainer) {
       this.options.dropdownContainer = document.body;
     }
+    this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
     this.options.i18n = { ...en_default, ...this.options.i18n };
     const autoCountryPromise = new Promise((resolve, reject) => {
@@ -2022,7 +2024,20 @@ var Iti = class {
   _initTelInputListeners() {
     const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
     let userOverrideFormatting = false;
+    const openDropdownWithPlus = () => {
+      this._openDropdown();
+      this.searchInput.value = "+";
+      this._filterCountries("", true);
+    };
     this._handleInputEvent = (e) => {
+      if (this.isAndroid && e?.data === "+" && separateDialCode) {
+        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();
+        return;
+      }
       if (this._updateCountryFromNumber(this.telInput.value)) {
         this._triggerCountryChange();
       }
@@ -2051,9 +2066,7 @@ var Iti = class {
         if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
           if (separateDialCode && e.key === "+") {
             e.preventDefault();
-            this._openDropdown();
-            this.searchInput.value = "+";
-            this._filterCountries("", true);
+            openDropdownWithPlus();
             return;
           }
           if (strictMode) {

diff --git a/react/build/IntlTelInput.d.ts b/react/build/IntlTelInput.d.ts
@@ -876,6 +876,7 @@ declare module "intl-tel-input" {
         private options;
         private hadInitialPlaceholder;
         private isRTL;
+        private isAndroid;
         private selectedCountryData;
         private countries;
         private dialCodeMaxLen;

diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -1478,6 +1478,7 @@ var Iti = class {
   options;
   hadInitialPlaceholder;
   isRTL;
+  isAndroid;
   selectedCountryData;
   countries;
   dialCodeMaxLen;
@@ -1536,6 +1537,7 @@ var Iti = class {
     if (this.options.useFullscreenPopup && !this.options.dropdownContainer) {
       this.options.dropdownContainer = document.body;
     }
+    this.isAndroid = typeof navigator !== "undefined" ? /Android/i.test(navigator.userAgent) : false;
     this.isRTL = !!this.telInput.closest("[dir=rtl]");
     this.options.i18n = { ...en_default, ...this.options.i18n };
     const autoCountryPromise = new Promise((resolve, reject) => {
@@ -1986,7 +1988,20 @@ var Iti = class {
   _initTelInputListeners() {
     const { strictMode, formatAsYouType, separateDialCode, formatOnDisplay } = this.options;
     let userOverrideFormatting = false;
+    const openDropdownWithPlus = () => {
+      this._openDropdown();
+      this.searchInput.value = "+";
+      this._filterCountries("", true);
+    };
     this._handleInputEvent = (e) => {
+      if (this.isAndroid && e?.data === "+" && separateDialCode) {
+        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();
+        return;
+      }
       if (this._updateCountryFromNumber(this.telInput.value)) {
         this._triggerCountryChange();
       }
@@ -2015,9 +2030,7 @@ var Iti = class {
         if (e.key && e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
           if (separateDialCode && e.key === "+") {
             e.preventDefault();
-            this._openDropdown();
-            this.searchInput.value = "+";
-            this._filterCountries("", true);
+            openDropdownWithPlus();
             return;
           }
           if (strictMode) {