fix: fix onChange not being called in clear

src/index.js

@@ -1,7 +1,7 @@
 import { fireEvent } from "@testing-library/dom";
 
 function wait(time) {
-  return new Promise(function (resolve) {
+  return new Promise(function(resolve) {
     setTimeout(() => resolve(), time);
   });
 }
@@ -112,23 +112,32 @@ function fireChangeEvent(event) {
 }
 
 const Keys = {
-  Backspace: { keyCode: 8, code: "Backspace", key: "Backspace" },
+  Backspace: { keyCode: 8, code: "Backspace", key: "Backspace" }
 };
 
 function backspace(element) {
-  const eventOptions = {
+  const keyboardEventOptions = {
     key: Keys.Backspace.key,
     keyCode: Keys.Backspace.keyCode,
-    which: Keys.Backspace.keyCode,
+    which: Keys.Backspace.keyCode
   };
-  fireEvent.keyDown(element, eventOptions);
-  fireEvent.keyUp(element, eventOptions);
+  fireEvent.keyDown(element, keyboardEventOptions);
+  fireEvent.keyUp(element, keyboardEventOptions);
 
   if (!element.readOnly) {
     fireEvent.input(element, {
-      inputType: "deleteContentBackward",
+      inputType: "deleteContentBackward"
     });
-    element.value = ""; // when we add special keys to API, will need to respect selected range
+
+    // Fire the `change` event before setting `element.value` beacuse React
+    // wraps the `value` setter and will then incorrectly assume that an
+    // `onChange` event being fired is a duplicate.
+    fireEvent.change(element, {
+      bubbles: true,
+      target: { value: "" }
+    });
+
+    element.value = "";
   }
 }
 
@@ -209,11 +218,11 @@ const userEvent = {
     const valArray = Array.isArray(values) ? values : [values];
     const selectedOptions = Array.from(
       element.querySelectorAll("option")
-    ).filter((opt) => valArray.includes(opt.value));
+    ).filter(opt => valArray.includes(opt.value));
 
     if (selectedOptions.length > 0) {
       if (element.multiple) {
-        selectedOptions.forEach((option) => selectOption(element, option));
+        selectedOptions.forEach(option => selectOption(element, option));
       } else {
         selectOption(element, selectedOptions[0]);
       }
@@ -225,14 +234,13 @@ const userEvent = {
 
     selectAll(element);
     backspace(element);
-    element.addEventListener("blur", fireChangeEvent);
   },
 
   async type(element, text, userOpts = {}) {
     if (element.disabled) return;
     const defaultOpts = {
       allAtOnce: false,
-      delay: 0,
+      delay: 0
     };
     const opts = Object.assign(defaultOpts, userOpts);
 
@@ -246,7 +254,7 @@ const userEvent = {
     if (opts.allAtOnce) {
       if (element.readOnly) return;
       fireEvent.input(element, {
-        target: { value: previousText + computedText },
+        target: { value: previousText + computedText }
       });
     } else {
       let actuallyTyped = previousText;
@@ -260,14 +268,14 @@ const userEvent = {
         const downEvent = fireEvent.keyDown(element, {
           key: key,
           keyCode: keyCode,
-          which: keyCode,
+          which: keyCode
         });
 
         if (downEvent) {
           const pressEvent = fireEvent.keyPress(element, {
             key: key,
             keyCode,
-            charCode: keyCode,
+            charCode: keyCode
           });
 
           const isTextPastThreshold =
@@ -278,18 +286,18 @@ const userEvent = {
             if (!element.readOnly)
               fireEvent.input(element, {
                 target: {
-                  value: actuallyTyped,
+                  value: actuallyTyped
                 },
                 bubbles: true,
-                cancelable: true,
+                cancelable: true
               });
           }
         }
 
         fireEvent.keyUp(element, {
           key: key,
           keyCode: keyCode,
-          which: keyCode,
+          which: keyCode
         });
       }
     }
@@ -317,11 +325,11 @@ const userEvent = {
       target: {
         files: {
           length: files.length,
-          item: (index) => files[index],
-          ...files,
-        },
+          item: index => files[index],
+          ...files
+        }
       },
-      ...changeInit,
+      ...changeInit
     });
   },
 
@@ -332,7 +340,7 @@ const userEvent = {
 
     const enabledElements = Array.prototype.filter.call(
       focusableElements,
-      function (el) {
+      function(el) {
         return el.getAttribute("tabindex") !== "-1" && !el.disabled;
       }
     );
@@ -367,7 +375,7 @@ const userEvent = {
     } else {
       next.focus();
     }
-  },
+  }
 };
 
 export default userEvent;