Correct input TYPE=CHECKBOX to set checked synchronized with dom attr…

…ibute
enbock · May 27, 2024 · af4a1b8 · af4a1b8
1 parent 4e19112
commit af4a1b8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enbock/ts-jsx",
-  "version": "0.1.9",
+  "version": "0.1.16",
   "description": "An simple JSX rendering based on ShadowDOMv1.",
   "license": "MIT",
   "author": "Endre Bock <endre@itbock.de>",
@@ -9,7 +9,8 @@
   },
   "main": "src/jsx-runtime.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "deploy": "./build.sh"
   },
   "keywords": [
     "jsx",

diff --git a/src/ShadowRenderer.ts b/src/ShadowRenderer.ts
@@ -60,14 +60,18 @@ export default class ShadowRenderer {
             (domNode as Component).updateProps(result.props);
             return;
         }
-        if (
-            (
-                domNode.tagName.toUpperCase() == 'INPUT' ||
-                domNode.hasOwnProperty('value')
-            )
-            && result.props.hasOwnProperty('value')
-        ) {
-            (<HTMLInputElement>domNode).value = result.props.value;
+        if (domNode.tagName.toUpperCase() == 'INPUT') {
+            if (domNode.hasOwnProperty('value') && result.props.hasOwnProperty('value')) {
+                (<HTMLInputElement>domNode).value = result.props.value;
+            }
+            if (String(domNode.getAttribute('type')).toLowerCase() == 'checkbox') {
+                (<HTMLInputElement>domNode).checked =
+                    result.props.checked === true ||
+                    result.props.checked == 'true' ||
+                    result.props.checked == 'on' ||
+                    false
+                ;
+            }
         }
         if (domNode.tagName.toUpperCase() == 'SELECT' && result.props.hasOwnProperty('value')) {
             nextFrameCalls.push(function updateSelectIndex(): void {
@@ -104,7 +108,7 @@ export default class ShadowRenderer {
         }
 
         const handlerCallback: () => void = () => nextFrameCalls.forEach(c => c());
-        if(window.requestAnimationFrame) window.requestAnimationFrame(handlerCallback);
+        if (window.requestAnimationFrame) window.requestAnimationFrame(handlerCallback);
         else setTimeout(handlerCallback, 1);
     }