Bubbling change event on inputs and textareas

docs/API.md

@@ -1,5 +1,5 @@
 <!-- version -->
-# 14.16.0 API Reference
+# 15.0.0 API Reference
 <!-- versionstop -->
 
 <!-- toc -->

lib/HTMLInputElement.js

@@ -20,7 +20,6 @@ module.exports = class HTMLInputElement extends HTMLElement {
     return this.$elm.prop("checked");
   }
   set checked(value) {
-    const checked = this.$elm.prop("checked");
     switch (this.type) {
       case "checkbox":
         break;
@@ -39,8 +38,6 @@ module.exports = class HTMLInputElement extends HTMLElement {
     }
 
     this.$elm.prop("checked", !!value);
-    if (checked === !!value) this.dispatchEvent(new InputEvent("input"));
-
     return value;
   }
   get disabled() {
@@ -97,13 +94,16 @@ module.exports = class HTMLInputElement extends HTMLElement {
         case "number":
         case "url":
           this.dispatchEvent(new InputEvent("input"));
+          this.dispatchEvent(new InputEvent("change"), { bubbles: true });
           break;
         case "file":
           if (!val) this[kFiles].length = 0;
           this.dispatchEvent(new Event("input"));
+          this.dispatchEvent(new InputEvent("change"), { bubbles: true });
           break;
         default:
           this.dispatchEvent(new Event("input"));
+          this.dispatchEvent(new InputEvent("change"), { bubbles: true });
           break;
       }
     }

lib/HTMLSelectElement.js

@@ -103,6 +103,7 @@ module.exports = class HTMLSelectElement extends HTMLElement {
         options.selectedIndex = idx;
         if (oldIdx !== options.selectedIndex) {
           this.dispatchEvent(new Event("input"));
+          this.dispatchEvent(new Event("change", { bubbles: true }));
         }
         return val;
       }

lib/HTMLTextAreaElement.js

@@ -36,6 +36,7 @@ module.exports = class HTMLTextAreaElement extends HTMLElement {
     if (oldVal !== val) {
       this.setAttribute("value", val);
       this.dispatchEvent(new InputEvent("input"));
+      this.dispatchEvent(new InputEvent("change", { bubbles: true }));
     }
 
     return val;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressen/tallahassee",
-  "version": "14.16.0",
+  "version": "15.0.0",
   "description": "Lightweight client testing framework",
   "main": "index.js",
   "license": "BSD-3-Clause",

test/elements-test.js

@@ -659,7 +659,7 @@ describe("elements", () => {
       expect(elm.checked).to.be.true;
     });
 
-    it("does NOT emit change when checked", () => {
+    it("does not emit change when checked", () => {
       const elm = document.getElementsByTagName("input")[1];
       let eventFired = false;
       elm.addEventListener("change", () => {

test/form-test.js

@@ -416,6 +416,13 @@ describe("forms", () => {
 
         el.value = "1";
       });
+
+      it(`should fire 'change' event on ${tagName} when value is changed`, (done) => {
+        const el = document.querySelector(tagName);
+        el.addEventListener("change", () => done());
+
+        el.value = "1";
+      });
     });
   });
 });