Dispatch change event on attribute change (#86)

Padax · Sep 5, 2021 · b8fc03c · b8fc03c
1 parent 8e69c95
commit b8fc03c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/wc/WComponent.js b/wc/WComponent.js
@@ -22,7 +22,6 @@ class WComponent extends HTMLElement{
     this.componentWillRender();
     this.render();
     this.componentDidRender();
-    this.key = new Date().getTime();
   }
 
   componentWillRender() {}
@@ -61,9 +60,6 @@ class WComponent extends HTMLElement{
       });
     });
   }
-  equals(component) {
-    return this.key === component.key;
-  }
   getAttributeParserByName(name) {
     if(typeof name !== 'string') {
       return undefined;

diff --git a/wc/components/Form.js b/wc/components/Form.js
@@ -69,7 +69,9 @@ class Form extends WComponent{
     submitBtn.addEventListener('click', this.submitHandler);
 
     // Bind radio click callback for name group control
-    this.querySelectorAll('w-radio').forEach(radio => radio.addEventListener('click', this.radioClickCallback));
+    this.querySelectorAll('w-radio').forEach(radio => {
+      radio.addEventListener('change', this.radioChangeCallback);
+    });
   }
   /**
    * Bind direct form access from document by name.
@@ -116,16 +118,16 @@ class Form extends WComponent{
     DOM.create('slot', {}, form);
   }
 
-  radioClickCallback = e => {
+  radioChangeCallback = e => {
     const radio = e.target;
     if(typeof radio.name !== 'string' || radio.disabled) { return; }
 
     const radios = Array.from(this.querySelectorAll(`w-radio[name='${radio.name}']`));
-    radios.forEach(r => {
-      if(!r.equals(radio)) {
-        r.checked = false;
-      }
-    });
+    // radios.forEach(r => {
+    //   if(!r.equals(radio)) {
+    //     r.checked = false;
+    //   }
+    // });
   }
   submitHandler = e => {
     this.dispatchEvent(this.events.submit);

diff --git a/wc/components/checkable/Checkable.js b/wc/components/checkable/Checkable.js
@@ -88,11 +88,17 @@ class Checkable extends WComponent{
       } else {
         input.removeAttribute(name);
       }
+
+      // Trigger change event
+      if(name === this.constructor.attributes.checked.name && oldValue !== newValue) {
+        this.dispatchEvent(this.events.change);
+      }
     }
   }
   bindEvents() {
     this.events = {
-      change: new Event('change')
+      change: new Event('change'),
+      click: new Event('click')
     };
     this.shadowRoot.addEventListener('click', this.clickHandler);
   }
@@ -115,7 +121,6 @@ class Checkable extends WComponent{
   clickHandler = e => {
     if(!this.disabled) {  // Trigger checked change
       this.checked = !this.checked;
-      this.dispatchEvent(this.events.change);
     }
   };