fix: fields with checked not working correctly

Author: aranlucas

src/Checkbox/Checkbox.stories.tsx

@@ -25,10 +25,7 @@ export const Primary: Story = {
   parameters: {
     form: {
       defaultValues: {
-        test: false,
-      },
-      onSubmit: (data: any) => {
-        console.log(data);
+        test: true,
       },
     },
   },

src/Checkbox/Checkbox.tsx

@@ -22,7 +22,10 @@ export function Checkbox<T extends FieldValues>({
   shouldUnregister,
   ...mantineProps
 }: CheckboxProps<T>) {
-  const { field, fieldState } = useController<T>({
+  const {
+    field: { value, ...field },
+    fieldState,
+  } = useController<T>({
     name,
     control,
     defaultValue,
@@ -31,7 +34,13 @@ export function Checkbox<T extends FieldValues>({
   });
 
   return (
-    <$Checkbox error={fieldState.error?.message} {...field} {...mantineProps} />
+    <$Checkbox
+      error={fieldState.error?.message}
+      value={value}
+      checked={value}
+      {...field}
+      {...mantineProps}
+    />
   );
 }
 

src/Chip/Chip.stories.tsx

@@ -20,9 +20,6 @@ export const Primary: Story = {
       defaultValues: {
         test: false,
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };
@@ -44,9 +41,6 @@ export const ChipGroup: StoryGroup = {
       defaultValues: {
         test: ["react"],
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };

src/Chip/Chip.tsx

@@ -22,14 +22,16 @@ export function Chip<T extends FieldValues>({
   shouldUnregister,
   ...props
 }: ChipProps<T>) {
-  const { field } = useController<T>({
+  const {
+    field: { value, ...field },
+  } = useController<T>({
     name,
     control,
     defaultValue,
     rules,
     shouldUnregister,
   });
-  return <$Chip {...field} {...props} />;
+  return <$Chip value={value} checked={value} {...field} {...props} />;
 }
 
 Chip.Group = <T extends FieldValues>({

src/ColorInput/ColorInput.stories.tsx

@@ -19,9 +19,6 @@ export const Primary: Story = {
       defaultValues: {
         test: "#C5D899",
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };

src/ColorPicker/ColorPicker.stories.tsx

@@ -19,9 +19,6 @@ export const Primary: Story = {
       defaultValues: {
         test: "rgba(47, 119, 150, 0.7)",
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };

src/FileInput/FileInput.stories.tsx

@@ -20,9 +20,6 @@ export const Primary: Story = {
       defaultValues: {
         test: undefined,
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };

src/Input/Input.stories.tsx

@@ -18,9 +18,6 @@ export const Primary: Story = {
       defaultValues: {
         test: "",
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };

src/JsonInput/JsonInput.stories.tsx

@@ -20,9 +20,6 @@ export const Primary: Story = {
       defaultValues: {
         test: "",
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };

src/MultiSelect/MultiSelect.stories.tsx

@@ -29,9 +29,6 @@ export const Primary: Story = {
       defaultValues: {
         test: [],
       },
-      onSubmit: (data: any) => {
-        console.log(data);
-      },
     },
   },
 };