Fix _handleKeyEvent firing twice for paste events

jackocnr · Mar 17, 2024 · ae29c47 · ae29c47
1 parent 2ea955e
commit ae29c47
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 131 deletions.
diff --git a/build/js/intlTelInput-jquery.js b/build/js/intlTelInput-jquery.js
@@ -832,7 +832,7 @@
                         userOverrideFormatting = false;
                     }
                     // handle FAYT, unless userOverrideFormatting or it's a paste event
-                    if (_this6.options.formatAsYouType && !userOverrideFormatting && e.inputType !== "insertFromPaste") {
+                    if (_this6.options.formatAsYouType && !userOverrideFormatting && !isPaste) {
                         // maintain caret position after reformatting
                         var currentCaretPos = _this6.telInput.selectionStart;
                         var valueBeforeCaret = _this6.telInput.value.substring(0, currentCaretPos);
@@ -844,14 +844,10 @@
                         _this6.telInput.setSelectionRange(newCaretPos, newCaretPos);
                     }
                 };
+                // this handles individual key presses as well as cut/paste events
+                // the advantage of the "input" event over "keyup" etc is that "input" only fires when the value changes,
+                // whereas "keyup" fires even for arrow key presses etc
                 this.telInput.addEventListener("input", this._handleKeyEvent);
-                // update flag on cut/paste events (now supported in all major browsers)
-                this._handleClipboardEvent = function() {
-                    // hack because "paste" event is fired before input is updated
-                    setTimeout(_this6._handleKeyEvent);
-                };
-                this.telInput.addEventListener("cut", this._handleClipboardEvent);
-                this.telInput.addEventListener("paste", this._handleClipboardEvent);
             }
         }, {
             key: "_translateCursorPosition",

diff --git a/build/js/intlTelInput-jquery.min.js b/build/js/intlTelInput-jquery.min.js
diff --git a/build/js/intlTelInput.js b/build/js/intlTelInput.js
@@ -827,7 +827,7 @@
                             userOverrideFormatting = false;
                         }
                         // handle FAYT, unless userOverrideFormatting or it's a paste event
-                        if (_this6.options.formatAsYouType && !userOverrideFormatting && e.inputType !== "insertFromPaste") {
+                        if (_this6.options.formatAsYouType && !userOverrideFormatting && !isPaste) {
                             // maintain caret position after reformatting
                             var currentCaretPos = _this6.telInput.selectionStart;
                             var valueBeforeCaret = _this6.telInput.value.substring(0, currentCaretPos);
@@ -839,14 +839,10 @@
                             _this6.telInput.setSelectionRange(newCaretPos, newCaretPos);
                         }
                     };
+                    // this handles individual key presses as well as cut/paste events
+                    // the advantage of the "input" event over "keyup" etc is that "input" only fires when the value changes,
+                    // whereas "keyup" fires even for arrow key presses etc
                     this.telInput.addEventListener("input", this._handleKeyEvent);
-                    // update flag on cut/paste events (now supported in all major browsers)
-                    this._handleClipboardEvent = function() {
-                        // hack because "paste" event is fired before input is updated
-                        setTimeout(_this6._handleKeyEvent);
-                    };
-                    this.telInput.addEventListener("cut", this._handleClipboardEvent);
-                    this.telInput.addEventListener("paste", this._handleClipboardEvent);
                 }
             }, {
                 key: "_translateCursorPosition",

diff --git a/build/js/intlTelInput.min.js b/build/js/intlTelInput.min.js
diff --git a/react/build/IntlTelInput.cjs.js b/react/build/IntlTelInput.cjs.js
diff --git a/react/build/IntlTelInput.cjs.js.map b/react/build/IntlTelInput.cjs.js.map
diff --git a/react/build/IntlTelInput.esm.js b/react/build/IntlTelInput.esm.js
diff --git a/react/build/IntlTelInput.esm.js.map b/react/build/IntlTelInput.esm.js.map
diff --git a/react/demo/simple-bundle.js b/react/demo/simple-bundle.js
diff --git a/react/demo/validation-bundle.js b/react/demo/validation-bundle.js
diff --git a/src/js/intlTelInput.js b/src/js/intlTelInput.js
@@ -802,7 +802,7 @@ class Iti {
       }
 
       // handle FAYT, unless userOverrideFormatting or it's a paste event
-      if (this.options.formatAsYouType && !userOverrideFormatting && e.inputType !== "insertFromPaste") {
+      if (this.options.formatAsYouType && !userOverrideFormatting && !isPaste) {
         // maintain caret position after reformatting
         const currentCaretPos = this.telInput.selectionStart;
         const valueBeforeCaret = this.telInput.value.substring(0, currentCaretPos);
@@ -814,15 +814,10 @@ class Iti {
         this.telInput.setSelectionRange(newCaretPos, newCaretPos);
       }
     };
+    // this handles individual key presses as well as cut/paste events
+    // the advantage of the "input" event over "keyup" etc is that "input" only fires when the value changes,
+    // whereas "keyup" fires even for arrow key presses etc
     this.telInput.addEventListener("input", this._handleKeyEvent);
-
-    // update flag on cut/paste events (now supported in all major browsers)
-    this._handleClipboardEvent = () => {
-      // hack because "paste" event is fired before input is updated
-      setTimeout(this._handleKeyEvent);
-    };
-    this.telInput.addEventListener("cut", this._handleClipboardEvent);
-    this.telInput.addEventListener("paste", this._handleClipboardEvent);
   }
 
   // iterate through the formattedValue until hit the right number of relevant chars