fix: restore native tag state before change handlers are called

marko-js · Feb 14, 2025 · f99c90f · f99c90f
1 parent f912994
commit f99c90f
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 138 deletions.
diff --git a/.changeset/strange-avocados-study.md b/.changeset/strange-avocados-study.md
@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Restore original native tag internal state before calling change handlers.
diff --git a/.sizes.json b/.sizes.json
@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 18176,
-        "brotli": 6819
+        "min": 18072,
+        "brotli": 6823
       }
     },
     {

diff --git a/.sizes/dom.js b/.sizes/dom.js
@@ -1,4 +1,4 @@
-// size: 18176 (min) 6819 (brotli)
+// size: 18072 (min) 6823 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -289,11 +289,10 @@ function controllable_input_checked_effect(scope, nodeAccessor) {
   let el = scope[nodeAccessor];
   syncControllable(el, "input", hasCheckboxChanged, () => {
     let checkedChange = scope[nodeAccessor + ";"];
-    checkedChange &&
-      ((scope[nodeAccessor + "="] = 6),
-      checkedChange(el.checked),
-      run(),
-      6 === scope[nodeAccessor + "="] && (el.checked = !el.checked));
+    if (checkedChange) {
+      let newValue = el.checked;
+      (el.checked = !newValue), checkedChange(newValue), run();
+    }
   });
 }
 function controllable_input_checkedValue(
@@ -320,36 +319,30 @@ function controllable_input_checkedValue_effect(scope, nodeAccessor) {
   syncControllable(el, "input", hasCheckboxChanged, () => {
     let checkedValueChange = scope[nodeAccessor + ";"];
     if (checkedValueChange) {
-      let oldValue = scope[nodeAccessor + ":"];
-      if (
-        ((scope[nodeAccessor + "="] = 6),
-        checkedValueChange(
-          Array.isArray(oldValue)
-            ? (function (arr, val, push) {
-                let index = arr.indexOf(val);
-                return (
-                  (push
-                    ? !~index && [...arr, val]
-                    : ~index &&
-                      arr.slice(0, index).concat(arr.slice(index + 1))) || arr
-                );
-              })(oldValue, el.value, el.checked)
-            : el.checked
-              ? el.value
-              : void 0,
-        ),
-        run(),
-        6 === scope[nodeAccessor + "="])
-      )
-        if (el.name && "r" === el.type[0])
-          for (let radio of el
-            .getRootNode()
-            .querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`))
-            radio.form === el.form &&
-              (radio.checked = Array.isArray(oldValue)
-                ? oldValue.includes(radio.value)
-                : oldValue === radio.value);
-        else el.checked = !el.checked;
+      let oldValue = scope[nodeAccessor + ":"],
+        newValue = Array.isArray(oldValue)
+          ? (function (arr, val, push) {
+              let index = arr.indexOf(val);
+              return (
+                (push
+                  ? !~index && [...arr, val]
+                  : ~index &&
+                    arr.slice(0, index).concat(arr.slice(index + 1))) || arr
+              );
+            })(oldValue, el.value, el.checked)
+          : el.checked
+            ? el.value
+            : void 0;
+      if (el.name && "r" === el.type[0])
+        for (let radio of el
+          .getRootNode()
+          .querySelectorAll(`[type=radio][name=${CSS.escape(el.name)}]`))
+          radio.form === el.form &&
+            (radio.checked = Array.isArray(oldValue)
+              ? oldValue.includes(radio.value)
+              : oldValue === radio.value);
+      else el.checked = !el.checked;
+      checkedValueChange(newValue), run();
     }
   });
 }
@@ -370,14 +363,14 @@ function controllable_input_value_effect(scope, nodeAccessor) {
   isResuming && (scope[nodeAccessor + ":"] = el.defaultValue),
     syncControllable(el, "input", hasValueChanged, (ev) => {
       let valueChange = scope[nodeAccessor + ";"];
-      valueChange &&
-        ((scope[nodeAccessor + "="] = 6),
-        ev && (inputType = ev.inputType),
-        valueChange(el.value),
-        run(),
-        6 === scope[nodeAccessor + "="] &&
+      if (valueChange) {
+        let newValue = el.value;
+        (inputType = ev?.inputType),
           setValueAndUpdateSelection(el, scope[nodeAccessor + ":"]),
-        (inputType = ""));
+          valueChange(newValue),
+          run(),
+          (inputType = "");
+      }
     });
 }
 function controllable_select_value(scope, nodeAccessor, value2, valueChange) {
@@ -393,16 +386,14 @@ function controllable_select_value_effect(scope, nodeAccessor) {
   let el = scope[nodeAccessor],
     onChange = () => {
       let valueChange = scope[nodeAccessor + ";"];
-      valueChange &&
-        ((scope[nodeAccessor + "="] = 6),
-        valueChange(
-          Array.isArray(scope[nodeAccessor + ":"])
-            ? Array.from(el.selectedOptions, toValueProp)
-            : el.value,
-        ),
-        run(),
-        6 === scope[nodeAccessor + "="] &&
-          setSelectOptions(el, scope[nodeAccessor + ":"], valueChange));
+      if (valueChange) {
+        let newValue = Array.isArray(scope[nodeAccessor + ":"])
+          ? Array.from(el.selectedOptions, toValueProp)
+          : el.value;
+        setSelectOptions(el, scope[nodeAccessor + ":"], valueChange),
+          valueChange(newValue),
+          run();
+      }
     };
   el._ ||
     new MutationObserver(() => {
@@ -450,12 +441,10 @@ function controllable_detailsOrDialog_open_effect(scope, nodeAccessor) {
     hasChanged,
     () => {
       let openChange = scope[nodeAccessor + ";"];
-      openChange &&
-        hasChanged() &&
-        ((scope[nodeAccessor + "="] = 6),
-        openChange(el.open),
-        run(),
-        6 === scope[nodeAccessor + "="] && (el.open = !el.open));
+      if (openChange && hasChanged()) {
+        let newValue = el.open;
+        (el.open = !newValue), openChange(newValue), run();
+      }
     },
   );
 }

diff --git a/packages/runtime-tags/src/dom/controllable.ts b/packages/runtime-tags/src/dom/controllable.ts
@@ -34,16 +34,10 @@ export function controllable_input_checked_effect(
       nodeAccessor + AccessorChar.ControlledHandler
     ] as undefined | ((value: unknown) => unknown);
     if (checkedChange) {
-      scope[nodeAccessor + AccessorChar.ControlledType] =
-        ControlledType.Pending;
-      checkedChange(el.checked);
+      const newValue = el.checked;
+      el.checked = !newValue;
+      checkedChange(newValue);
       run();
-      if (
-        scope[nodeAccessor + AccessorChar.ControlledType] ===
-        ControlledType.Pending
-      ) {
-        el.checked = !el.checked;
-      }
     }
   });
 }
@@ -78,37 +72,29 @@ export function controllable_input_checkedValue_effect(
     ] as undefined | ((value: unknown) => unknown);
     if (checkedValueChange) {
       const oldValue = scope[nodeAccessor + AccessorChar.ControlledValue];
-      scope[nodeAccessor + AccessorChar.ControlledType] =
-        ControlledType.Pending;
-      checkedValueChange(
-        Array.isArray(oldValue)
-          ? updateList(oldValue, el.value, el.checked)
-          : el.checked
-            ? el.value
-            : undefined,
-      );
-      run();
-
-      if (
-        scope[nodeAccessor + AccessorChar.ControlledType] ===
-        ControlledType.Pending
-      ) {
-        if (el.name && el.type[0] === "r") {
-          for (const radio of (
-            el.getRootNode() as Document | ShadowRoot
-          ).querySelectorAll<HTMLInputElement>(
-            `[type=radio][name=${CSS.escape(el.name)}]`,
-          )) {
-            if (radio.form === el.form) {
-              radio.checked = Array.isArray(oldValue)
-                ? oldValue.includes(radio.value)
-                : oldValue === radio.value;
-            }
+      const newValue = Array.isArray(oldValue)
+        ? updateList(oldValue, el.value, el.checked)
+        : el.checked
+          ? el.value
+          : undefined;
+
+      if (el.name && el.type[0] === "r") {
+        for (const radio of (
+          el.getRootNode() as Document | ShadowRoot
+        ).querySelectorAll<HTMLInputElement>(
+          `[type=radio][name=${CSS.escape(el.name)}]`,
+        )) {
+          if (radio.form === el.form) {
+            radio.checked = Array.isArray(oldValue)
+              ? oldValue.includes(radio.value)
+              : oldValue === radio.value;
           }
-        } else {
-          el.checked = !el.checked;
         }
+      } else {
+        el.checked = !el.checked;
       }
+      checkedValueChange(newValue);
+      run();
     }
   });
 }
@@ -151,21 +137,14 @@ export function controllable_input_value_effect(
       | undefined
       | ((value: unknown) => unknown);
     if (valueChange) {
-      scope[nodeAccessor + AccessorChar.ControlledType] =
-        ControlledType.Pending;
-      if (ev) inputType = (ev as InputEvent).inputType;
-      valueChange(el.value);
+      const newValue = el.value;
+      inputType = (ev as InputEvent)?.inputType;
+      setValueAndUpdateSelection(
+        el,
+        scope[nodeAccessor + AccessorChar.ControlledValue],
+      );
+      valueChange(newValue);
       run();
-      if (
-        scope[nodeAccessor + AccessorChar.ControlledType] ===
-        ControlledType.Pending
-      ) {
-        setValueAndUpdateSelection(
-          el,
-          scope[nodeAccessor + AccessorChar.ControlledValue],
-        );
-      }
-
       inputType = "";
     }
   });
@@ -210,25 +189,18 @@ export function controllable_select_value_effect(
       | undefined
       | ((value: unknown) => unknown);
     if (valueChange) {
-      scope[nodeAccessor + AccessorChar.ControlledType] =
-        ControlledType.Pending;
-      valueChange(
-        Array.isArray(scope[nodeAccessor + AccessorChar.ControlledValue])
-          ? Array.from(el.selectedOptions, toValueProp)
-          : el.value,
+      const newValue = Array.isArray(
+        scope[nodeAccessor + AccessorChar.ControlledValue],
+      )
+        ? Array.from(el.selectedOptions, toValueProp)
+        : el.value;
+      setSelectOptions(
+        el,
+        scope[nodeAccessor + AccessorChar.ControlledValue],
+        valueChange,
       );
+      valueChange(newValue);
       run();
-
-      if (
-        scope[nodeAccessor + AccessorChar.ControlledType] ===
-        ControlledType.Pending
-      ) {
-        setSelectOptions(
-          el,
-          scope[nodeAccessor + AccessorChar.ControlledValue],
-          valueChange,
-        );
-      }
     }
   };
 
@@ -312,16 +284,10 @@ export function controllable_detailsOrDialog_open_effect(
         nodeAccessor + AccessorChar.ControlledHandler
       ] as undefined | ((value: unknown) => unknown);
       if (openChange && hasChanged()) {
-        scope[nodeAccessor + AccessorChar.ControlledType] =
-          ControlledType.Pending;
-        openChange(el.open);
+        const newValue = el.open;
+        el.open = !newValue;
+        openChange(newValue);
         run();
-        if (
-          scope[nodeAccessor + AccessorChar.ControlledType] ===
-          ControlledType.Pending
-        ) {
-          el.open = !el.open;
-        }
       }
     },
   );