Fixes #621 The autoNumeric:formatted event should be triggered when…

… the input field is cleared while continuously pressing the `Backspace` or `Delete`keys

Signed-off-by: Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Changelog for autoNumeric
 
+### 4.5.2
++ Fixes #621 The `autoNumeric:formatted` event should be triggered when the input field is cleared while continuously pressing the `Backspace` or `Delete`keys
+
 ### 4.5.1
 + Fixes #611 The html `readonly` attribute is ignored on initial load
 + Fix how readonly and disabled inputs should not process keyboard events

package.json

@@ -1,6 +1,6 @@
 {
   "name": "autonumeric",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "description": "autoNumeric is a standalone Javascript library that provides live *as-you-type* formatting for international numbers and currencies. It supports most international numeric formats and currencies including those used in Europe, Asia, and North and South America.",
   "main": "dist/autoNumeric.js",
   "browser": "dist/autoNumeric.min.js",
@@ -107,13 +107,14 @@
     "phantomjs-prebuilt": "^2.1.16",
     "rimraf": "^2.6.1",
     "uglify-js": "^3.3.12",
+    "uglifyjs-webpack-plugin": "^2.0.1",
     "wdio-jasmine-framework": "^0.3.2",
     "wdio-selenium-standalone-service": "^0.0.10",
     "wdio-spec-reporter": "^0.1.4",
     "wdio-static-server-service": "^1.0.1",
     "webdriverio": "^4.13.2",
-    "webpack": "^4.0.1",
-    "webpack-cli": "^2.0.9",
+    "webpack": "^4.26.0",
+    "webpack-cli": "^3.1.2",
     "webpack-merge": "^4.1.2"
   },
   "scripts": {

src/AutoNumeric.js

@@ -1,8 +1,8 @@
 /**
  *               AutoNumeric.js
  *
- * @version      4.5.1
- * @date         2018-10-28 UTC 08:20
+ * @version      4.5.2
+ * @date         2019-01-04 UTC 09:20
  *
  * @authors      Bob Knothe, Alexandre Bonneau
  * @contributors Sokolov Yura and others, cf. AUTHORS
@@ -909,7 +909,7 @@ export default class AutoNumeric {
      * @returns {string}
      */
     static version() {
-        return '4.5.1';
+        return '4.5.2';
     }
 
     /**
@@ -6356,11 +6356,18 @@ To solve that, you'd need to either set \`decimalPlacesRawValue\` to \`null\`, o
      * - keydown
      * - keyup
      *
-     * If 'delete' or 'backspace' is entered, the following events are sent :
+     * If 'delete' or 'backspace' are entered 'normally', the following events are sent :
      * - keydown
      * - input
      * - keyup
      *
+     * If 'delete' or 'backspace' are entered continuously (with the key still pressed), the following events are sent :
+     * - keydown
+     * - input
+     * [- keydown
+     * - input] x times
+     * - keyup
+     *
      * If 'enter' is entered and the value has not changed, the following events are sent :
      * - keydown
      * - keypress
@@ -6398,6 +6405,11 @@ To solve that, you'd need to either set \`decimalPlacesRawValue\` to \`null\`, o
         this.initialValueOnKeydown = AutoNumericHelper.getElementValue(e.target); // This is needed in `onKeyup()` to check if the value as changed during the key press
         this.initialRawValueOnKeydown = this.rawValue;
 
+        this.keydownEventCounter += 1; // Every time the keydown event is caught, increment the counter to keep track if the key is continuously pressed
+        if (this.keydownEventCounter === 1) {
+            this.initialRawValueOnFirstKeydown = this.rawValue;
+        }
+
         if (this.formulaMode) {
             if (this.eventKey === AutoNumericEnum.keyName.Esc) { // Cancel the formula
                 this.formulaMode = false;
@@ -6568,6 +6580,8 @@ To solve that, you'd need to either set \`decimalPlacesRawValue\` to \`null\`, o
      */
     _onKeyup(e) {
         this.isEditing = false;
+        const multipleKeydownEvents = this.keydownEventCounter > 1;
+        this.keydownEventCounter = 0; // Reset the keydown events counter
 
         if (this.formulaMode) {
             return;
@@ -6632,7 +6646,7 @@ To solve that, you'd need to either set \`decimalPlacesRawValue\` to \`null\`, o
         const skip = this._processNonPrintableKeysAndShortcuts(e);
         delete this.valuePartsBeforePaste;
         const targetValue = AutoNumericHelper.getElementValue(e.target);
-        if (skip || targetValue === '') {
+        if (skip || !multipleKeydownEvents && targetValue === '') { // When the user keeps pressing the backspace or delete key, and end up deleting the entire input text, then the target value is equal to '', but we shouldn't `return` without first testing what was the initial value when the user started pressing any key (cf. issue #621)
             return;
         }
 
@@ -6665,7 +6679,8 @@ To solve that, you'd need to either set \`decimalPlacesRawValue\` to \`null\`, o
         this._saveRawValueForAndroid();
 
         // If the input value has changed during the key press event chain, an event is sent to alert that a formatting has been done (cf. Issue #187)
-        if (targetValue !== this.initialValueOnKeydown) {
+        if ((multipleKeydownEvents && targetValue !== this.initialRawValueOnFirstKeydown) || // If multiple keydown events are detected, then we need to check the rawValue saved on the very first event
+            targetValue !== this.initialValueOnKeydown) {
             this._triggerEvent(AutoNumeric.events.formatted, e.target, {
                 oldValue   : this.initialValueOnKeydown,
                 newValue   : targetValue,

test/e2e/index.html

@@ -1055,6 +1055,15 @@ <h5 id="tag_h5">12345.67</h5>
 			</div>
 		</div>
 	</div>
+
+	<div class="testSuite">
+		<div class="test">
+			<p class="description">Issue #621</p>
+			<div>
+				<input id="issue_621" type="text" placeholder="#621" value="662736.82">
+			</div>
+		</div>
+	</div>
 </div>
 <script>
     //-------------- Classic input
@@ -2219,6 +2228,26 @@ <h5 id="tag_h5">12345.67</h5>
     new AutoNumeric('#issue_611_html_readonly', { readOnly: false });
     new AutoNumeric('#issue_611_option_readonly',  { readOnly: true });
     new AutoNumeric('#issue_611_html_and_option_readonly', { readOnly: true });
+
+    //-------------- Issue #621
+    const issue621an = new AutoNumeric('#issue_621');
+    const issue621 = document.querySelector("#issue_621");
+    let backspaceCounter = 0;
+    issue621.addEventListener('keydown', e => {
+        if (e.keyCode === 8) {
+            backspaceCounter++;
+            console.log(`keydown Backspace ${backspaceCounter}`);
+        }
+    });
+    issue621.addEventListener('input', () => {
+        console.log(`${backspaceCounter} : input`);
+    });
+    issue621.addEventListener('keyup', () => {
+        console.log(`${backspaceCounter} : keyup`);
+    });
+    issue621.addEventListener("autoNumeric:formatted", () => {
+        console.log(`===> Formatted: ${issue621an.getFormatted()}`);
+    });
 </script>
 </body>
 </html>