Fix input attributes (#86)

Padax · Aug 30, 2021 · 11f71e6 · 11f71e6
1 parent a41f972
commit 11f71e6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 30 deletions.
diff --git a/wc/components/Checkable/Checkable.js b/wc/components/Checkable/Checkable.js
@@ -78,35 +78,33 @@ class Checkable extends WComponent{
     this.shadowRoot.querySelector('input').addEventListener('change', this.inputChangeHandler);
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    const input = this.shadowRoot.querySelector('input');
+    const parser = this.getAttributeParserByName(name);
+    const value = parser(newValue, this.attributes[name]);
+    if(input) {
+      input[name] = value;
+      if(!value) {
+        input.removeAttribute(name);
+      }
+    }
+  }
   render(){
     const ctn = DOM.create('label', null, this.shadowRoot);
 
-    const inputProps = { type: this.type };
-    const inputAttrs = {};
+    const inputAttrs = { type: this.type };
     if(this.checked) { inputAttrs.checked = true; }
     if(this.disabled) { inputAttrs.disabled = true; }
     if(this.value) { inputAttrs.value = this.value; }
     if(this.name) { inputAttrs.name = this.name; }
-    DOM.create('input', { props: inputProps, attrs: inputAttrs }, ctn);
+    DOM.create('input', { attrs: inputAttrs }, ctn);
 
     const iconProps = { className: 'icon' };
     DOM.create('span', { props: iconProps }, ctn);
 
     DOM.create('slot', {}, ctn);
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    const input = this.shadowRoot.querySelector('input');
-    const parser = this.getAttributeParserByName(name);
-    const value = parser(newValue, this.attributes[name]);
-    if(input) {
-      input[name] = value;
-      if(!value) {
-        input.removeAttribute(name);
-      }
-    }
-  }
-
   inputChangeHandler = e => {
     this.checked = e.target.checked;
     if(typeof this.onchange === 'function') {

diff --git a/wc/components/checkable/Checkable.js b/wc/components/checkable/Checkable.js
@@ -78,35 +78,33 @@ class Checkable extends WComponent{
     this.shadowRoot.querySelector('input').addEventListener('change', this.inputChangeHandler);
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    const input = this.shadowRoot.querySelector('input');
+    const parser = this.getAttributeParserByName(name);
+    const value = parser(newValue, this.attributes[name]);
+    if(input) {
+      input[name] = value;
+      if(!value) {
+        input.removeAttribute(name);
+      }
+    }
+  }
   render(){
     const ctn = DOM.create('label', null, this.shadowRoot);
 
-    const inputProps = { type: this.type };
-    const inputAttrs = {};
+    const inputAttrs = { type: this.type };
     if(this.checked) { inputAttrs.checked = true; }
     if(this.disabled) { inputAttrs.disabled = true; }
     if(this.value) { inputAttrs.value = this.value; }
     if(this.name) { inputAttrs.name = this.name; }
-    DOM.create('input', { props: inputProps, attrs: inputAttrs }, ctn);
+    DOM.create('input', { attrs: inputAttrs }, ctn);
 
     const iconProps = { className: 'icon' };
     DOM.create('span', { props: iconProps }, ctn);
 
     DOM.create('slot', {}, ctn);
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    const input = this.shadowRoot.querySelector('input');
-    const parser = this.getAttributeParserByName(name);
-    const value = parser(newValue, this.attributes[name]);
-    if(input) {
-      input[name] = value;
-      if(!value) {
-        input.removeAttribute(name);
-      }
-    }
-  }
-
   inputChangeHandler = e => {
     this.checked = e.target.checked;
     if(typeof this.onchange === 'function') {