Fixes #118, timing issues with radio buttons and side-effects.

Author: ciscoheat

CHANGELOG.md

@@ -5,6 +5,13 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- `capture` and `restore` are now hoisted functions.
+- Fixed timing issues with radio buttons and validation with side-effects.
+
 ## [0.8.4] - 2023-04-27
 
 ### Fixed

src/lib/client/index.ts

@@ -1219,6 +1219,14 @@ function formEnhance<T extends AnyZodObject, M>(
     );
   }
 
+  function timingIssue(el: EventTarget | null) {
+    return (
+      el &&
+      (el instanceof HTMLSelectElement ||
+        (el instanceof HTMLInputElement && el.type == 'radio'))
+    );
+  }
+
   // Add blur event, to check tainted
   async function checkBlur(e: Event) {
     if (
@@ -1228,8 +1236,8 @@ function formEnhance<T extends AnyZodObject, M>(
       return;
     }
 
-    // Select bindings have some timing issue, need to wait
-    if (e.target instanceof HTMLSelectElement) {
+    // Some form fields have some timing issue, need to wait
+    if (timingIssue(e.target)) {
       await new Promise((r) => setTimeout(r, 0));
     }
 
@@ -1251,8 +1259,8 @@ function formEnhance<T extends AnyZodObject, M>(
       return;
     }
 
-    // Select bindings have some timing issue, need to wait
-    if (e.target instanceof HTMLSelectElement) {
+    // Some form fields have some timing issue, need to wait
+    if (timingIssue(e.target)) {
       await new Promise((r) => setTimeout(r, 0));
     }