Fix INPUT value case by forcing value after common updates

enbock · Oct 15, 2024 · 09636ab · 09636ab
1 parent 19c8b7f
commit 09636ab
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enbock/ts-jsx",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "An simple JSX rendering based on ShadowDOMv1.",
   "license": "MIT",
   "author": "Endre Bock <endre@itbock.de>",

diff --git a/src/ShadowRenderer.ts b/src/ShadowRenderer.ts
@@ -60,26 +60,6 @@ export default class ShadowRenderer {
             (domNode as Component).updateProps(result.props);
             return;
         }
-        if (domNode.tagName.toUpperCase() == 'INPUT') {
-            if (result.props.hasOwnProperty('value')) {
-                (<HTMLInputElement>domNode).value = result.props.value;
-            }
-            if (String(domNode.getAttribute('type')).toLowerCase() == 'checkbox') {
-                (<HTMLInputElement>domNode).checked = result.props.checked || result.props.checked === '';
-            }
-        }
-        if (domNode.tagName.toUpperCase() == 'SELECT' && result.props.hasOwnProperty('value')) {
-            nextFrameCalls.push(function updateSelectIndex(): void {
-                const options: HTMLCollectionOf<HTMLOptionElement> =
-                    <HTMLCollectionOf<HTMLOptionElement>>domNode.getElementsByTagName('OPTION');
-                for (let i = 0; i < options.length; i++) {
-                    if (result.props.value != options[i].value) continue;
-                    if (domNode.hasOwnProperty('selectedValue'))
-                        (<any>domNode).selectedValue = result.props.value;
-                    (<HTMLSelectElement>domNode).selectedIndex = i;
-                }
-            });
-        }
         for (const key of Object.keys(result.props)) {
             const isOnDashStyle: boolean = key.substring(0, 3) == 'on-';
             if (isOnDashStyle || key.match(/^on[A-Z]/) !== null) {
@@ -101,6 +81,26 @@ export default class ShadowRenderer {
                 console.warn('TS-JSX: Unexpected missing attribute \'' + key + '\' while cleaning attributes.');
             }
         }
+        if (domNode.tagName.toUpperCase() == 'INPUT') {
+            if (result.props.hasOwnProperty('value')) {
+                (<HTMLInputElement>domNode).value = result.props.value;
+            }
+            if (String(domNode.getAttribute('type')).toLowerCase() == 'checkbox') {
+                (<HTMLInputElement>domNode).checked = result.props.checked || result.props.checked === '';
+            }
+        }
+        if (domNode.tagName.toUpperCase() == 'SELECT' && result.props.hasOwnProperty('value')) {
+            nextFrameCalls.push(function updateSelectIndex(): void {
+                const options: HTMLCollectionOf<HTMLOptionElement> =
+                    <HTMLCollectionOf<HTMLOptionElement>>domNode.getElementsByTagName('OPTION');
+                for (let i = 0; i < options.length; i++) {
+                    if (result.props.value != options[i].value) continue;
+                    if (domNode.hasOwnProperty('selectedValue'))
+                        (<any>domNode).selectedValue = result.props.value;
+                    (<HTMLSelectElement>domNode).selectedIndex = i;
+                }
+            });
+        }
 
         const handlerCallback: () => void = () => nextFrameCalls.forEach(c => c());
         if (window.requestAnimationFrame) window.requestAnimationFrame(handlerCallback);