fix: respect original value type in radio and select fields

measuredco · Dec 13, 2024 · 00ccd1d · 00ccd1d
1 parent 70b3204
commit 00ccd1d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 22 deletions.
diff --git a/packages/core/components/AutoField/fields/DefaultField/index.tsx b/packages/core/components/AutoField/fields/DefaultField/index.tsx
@@ -30,6 +30,7 @@ export const DefaultField = ({
         className={getClassName("input")}
         autoComplete="off"
         type={field.type}
+        title={label || name}
         name={name}
         value={typeof value === "undefined" ? "" : value.toString()}
         onChange={(e) => {

diff --git a/packages/core/components/AutoField/fields/RadioField/index.tsx b/packages/core/components/AutoField/fields/RadioField/index.tsx
@@ -2,6 +2,7 @@ import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { CheckCircle } from "lucide-react";
 import { FieldPropsInternal } from "../..";
+import { safeJsonParse } from "../../../../lib/safe-json-parse";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -37,17 +38,9 @@ export const RadioField = ({
               className={getClassName("radioInput")}
               value={option.value as string | number}
               name={name}
-              onChange={(e) => {
-                if (
-                  e.currentTarget.value === "true" ||
-                  e.currentTarget.value === "false"
-                ) {
-                  onChange(JSON.parse(e.currentTarget.value));
-                  return;
-                }
-
-                onChange(e.currentTarget.value);
-              }}
+              onChange={({ target: { value } }) =>
+                onChange(safeJsonParse(value) || value)
+              }
               disabled={readOnly}
               checked={value === option.value}
             />

diff --git a/packages/core/components/AutoField/fields/SelectField/index.tsx b/packages/core/components/AutoField/fields/SelectField/index.tsx
@@ -2,6 +2,7 @@ import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { ChevronDown } from "lucide-react";
 import { FieldPropsInternal } from "../..";
+import { safeJsonParse } from "../../../../lib/safe-json-parse";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -27,19 +28,12 @@ export const SelectField = ({
     >
       <select
         id={id}
+        title={label || name}
         className={getClassName("input")}
         disabled={readOnly}
-        onChange={(e) => {
-          if (
-            e.currentTarget.value === "true" ||
-            e.currentTarget.value === "false"
-          ) {
-            onChange(JSON.parse(e.currentTarget.value));
-            return;
-          }
-
-          onChange(e.currentTarget.value);
-        }}
+        onChange={({ target: { value } }) =>
+          onChange(safeJsonParse(value) || value)
+        }
         value={value}
       >
         {field.options.map((option) => (

diff --git a/packages/core/lib/safe-json-parse.ts b/packages/core/lib/safe-json-parse.ts
@@ -0,0 +1,8 @@
+export const safeJsonParse = <T>(str: string) => {
+  try {
+    const jsonValue: T = JSON.parse(str);
+    return jsonValue;
+  } catch {
+    return str;
+  }
+};