fix: respect existing value type in radios and select fields

measuredco · Dec 16, 2024 · 6e5864a · 6e5864a
1 parent b51954a
commit 6e5864a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/packages/core/components/AutoField/fields/RadioField/index.tsx b/packages/core/components/AutoField/fields/RadioField/index.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { CheckCircle } from "lucide-react";
@@ -16,6 +17,12 @@ export const RadioField = ({
   label,
   Label,
 }: FieldPropsInternal) => {
+  const flatOptions = useMemo(
+    () =>
+      field.type === "radio" ? field.options.map(({ value }) => value) : [],
+    [field]
+  );
+
   if (field.type !== "radio" || !field.options) {
     return null;
   }
@@ -38,9 +45,16 @@ export const RadioField = ({
               className={getClassName("radioInput")}
               value={option.value as string | number}
               name={name}
-              onChange={({ target: { value } }) =>
-                onChange(safeJsonParse(value) || value)
-              }
+              onChange={(e) => {
+                const jsonValue =
+                  safeJsonParse(e.target.value) || e.target.value;
+
+                if (flatOptions.indexOf(jsonValue) > -1) {
+                  onChange(jsonValue);
+                } else {
+                  onChange(e.target.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
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { ChevronDown } from "lucide-react";
@@ -16,6 +17,12 @@ export const SelectField = ({
   readOnly,
   id,
 }: FieldPropsInternal) => {
+  const flatOptions = useMemo(
+    () =>
+      field.type === "select" ? field.options.map(({ value }) => value) : [],
+    [field]
+  );
+
   if (field.type !== "select" || !field.options) {
     return null;
   }
@@ -31,9 +38,15 @@ export const SelectField = ({
         title={label || name}
         className={getClassName("input")}
         disabled={readOnly}
-        onChange={({ target: { value } }) =>
-          onChange(safeJsonParse(value) || value)
-        }
+        onChange={(e) => {
+          const jsonValue = safeJsonParse(e.target.value) || e.target.value;
+
+          if (flatOptions.indexOf(jsonValue) > -1) {
+            onChange(jsonValue);
+          } else {
+            onChange(e.target.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
@@ -1,4 +1,4 @@
-export const safeJsonParse = <T>(str: string) => {
+export const safeJsonParse = <T = any>(str: string) => {
   try {
     const jsonValue: T = JSON.parse(str);
     return jsonValue;