diff --git a/wc/WComponent.js b/wc/WComponent.js index 69b58e4..f7ffa87 100644 --- 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 index 136d8a0..c755415 100644 --- 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 index dcdfd11..602a57c 100644 --- 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); } };