Skip to content

Commit 5dfd0be

Browse files
aranlucasaranlucas
committed
fix: using values and onChange props would break react-hook-form
1 parent 115cd0a commit 5dfd0be

File tree

22 files changed

+418
-76
lines changed

22 files changed

+418
-76
lines changed

‎src/Autocomplete/Autocomplete.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,21 @@ import {
99
} from "@mantine/core";
1010

1111
export type AutocompleteProps<T extends FieldValues> = UseControllerProps<T> &
12-
$AutocompleteProps;
12+
Omit<$AutocompleteProps, "value" | "defaultValue">;
1313

1414
export function Autocomplete<T extends FieldValues>({
1515
name,
1616
control,
1717
defaultValue,
1818
rules,
1919
shouldUnregister,
20+
onChange,
2021
...props
2122
}: AutocompleteProps<T>) {
22-
const { field, fieldState } = useController<T>({
23+
const {
24+
field: { value, onChange: fieldOnChange, ...field },
25+
fieldState,
26+
} = useController<T>({
2327
name,
2428
control,
2529
defaultValue,
@@ -28,6 +32,15 @@ export function Autocomplete<T extends FieldValues>({
2832
});
2933

3034
return (
31-
<$Autocomplete error={fieldState.error?.message} {...field} {...props} />
35+
<$Autocomplete
36+
error={fieldState.error?.message}
37+
value={value}
38+
onChange={(e) => {
39+
fieldOnChange(e);
40+
onChange?.(e);
41+
}}
42+
{...field}
43+
{...props}
44+
/>
3245
);
3346
}

‎src/Checkbox/Checkbox.tsx‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,21 @@ import {
1010
} from "@mantine/core";
1111

1212
export type CheckboxProps<T extends FieldValues> = UseControllerProps<T> &
13-
$CheckboxProps;
13+
Omit<$CheckboxProps, "checked" | "defaultValue">;
1414
export type CheckboxGroupProps<T extends FieldValues> = UseControllerProps<T> &
15-
$CheckboxGroupProps;
15+
Omit<$CheckboxGroupProps, "checked" | "defaultValue">;
1616

1717
export function Checkbox<T extends FieldValues>({
1818
name,
1919
control,
2020
defaultValue,
2121
rules,
2222
shouldUnregister,
23-
...mantineProps
23+
onChange,
24+
...props
2425
}: CheckboxProps<T>) {
2526
const {
26-
field: { value, ...field },
27+
field: { value, onChange: fieldOnChange, ...field },
2728
fieldState,
2829
} = useController<T>({
2930
name,
@@ -38,8 +39,12 @@ export function Checkbox<T extends FieldValues>({
3839
error={fieldState.error?.message}
3940
value={value}
4041
checked={value}
42+
onChange={(e) => {
43+
fieldOnChange(e);
44+
onChange?.(e);
45+
}}
4146
{...field}
42-
{...mantineProps}
47+
{...props}
4348
/>
4449
);
4550
}
@@ -50,9 +55,13 @@ Checkbox.Group = <T extends FieldValues>({
5055
defaultValue,
5156
rules,
5257
shouldUnregister,
58+
onChange,
5359
...props
5460
}: CheckboxGroupProps<T>) => {
55-
const { field, fieldState } = useController<T>({
61+
const {
62+
field: { value, onChange: fieldOnChange, ...field },
63+
fieldState,
64+
} = useController<T>({
5665
name,
5766
control,
5867
defaultValue,
@@ -61,7 +70,16 @@ Checkbox.Group = <T extends FieldValues>({
6170
});
6271

6372
return (
64-
<$Checkbox.Group error={fieldState.error?.message} {...field} {...props} />
73+
<$Checkbox.Group
74+
error={fieldState.error?.message}
75+
value={value}
76+
onChange={(e) => {
77+
fieldOnChange(e);
78+
onChange?.(e);
79+
}}
80+
{...field}
81+
{...props}
82+
/>
6583
);
6684
};
6785

‎src/Chip/Chip.tsx‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,41 @@ import {
1010
} from "@mantine/core";
1111

1212
export type ChipProps<T extends FieldValues> = UseControllerProps<T> &
13-
$ChipProps;
13+
Omit<$ChipProps, "value" | "defaultValue">;
1414
export type ChipGroupProps<T extends FieldValues> = UseControllerProps<T> &
15-
$ChipGroupProps;
15+
Omit<$ChipGroupProps, "value" | "defaultValue">;
1616

1717
export function Chip<T extends FieldValues>({
1818
name,
1919
control,
2020
defaultValue,
2121
rules,
2222
shouldUnregister,
23+
onChange,
2324
...props
2425
}: ChipProps<T>) {
2526
const {
26-
field: { value, ...field },
27+
field: { value, onChange: fieldOnChange, ...field },
2728
} = useController<T>({
2829
name,
2930
control,
3031
defaultValue,
3132
rules,
3233
shouldUnregister,
3334
});
34-
return <$Chip value={value} checked={value} {...field} {...props} />;
35+
36+
return (
37+
<$Chip
38+
value={value}
39+
checked={value}
40+
onChange={(e) => {
41+
fieldOnChange(e);
42+
onChange?.(e);
43+
}}
44+
{...field}
45+
{...props}
46+
/>
47+
);
3548
}
3649

3750
Chip.Group = <T extends FieldValues>({
@@ -40,17 +53,30 @@ Chip.Group = <T extends FieldValues>({
4053
defaultValue,
4154
rules,
4255
shouldUnregister,
56+
onChange,
4357
...props
4458
}: ChipGroupProps<T>) => {
45-
const { field } = useController({
59+
const {
60+
field: { value, onChange: fieldOnChange, ...field },
61+
} = useController({
4662
name,
4763
control,
4864
defaultValue,
4965
rules,
5066
shouldUnregister,
5167
});
5268

53-
return <$Chip.Group {...field} {...props} />;
69+
return (
70+
<$Chip.Group
71+
value={value}
72+
onChange={(e) => {
73+
fieldOnChange(e);
74+
onChange?.(e);
75+
}}
76+
{...field}
77+
{...props}
78+
/>
79+
);
5480
};
5581

5682
Chip.Item = $Chip;

‎src/ColorInput/ColorInput.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,21 @@ import {
99
} from "@mantine/core";
1010

1111
export type ColorInputProps<T extends FieldValues> = UseControllerProps<T> &
12-
$ColorInputProps;
12+
Omit<$ColorInputProps, "value" | "defaultValue">;
1313

1414
export function ColorInput<T extends FieldValues>({
1515
name,
1616
control,
1717
defaultValue,
1818
rules,
1919
shouldUnregister,
20+
onChange,
2021
...props
2122
}: ColorInputProps<T>) {
22-
const { field, fieldState } = useController<T>({
23+
const {
24+
field: { value, onChange: fieldOnChange, ...field },
25+
fieldState,
26+
} = useController<T>({
2327
name,
2428
control,
2529
defaultValue,
@@ -28,6 +32,15 @@ export function ColorInput<T extends FieldValues>({
2832
});
2933

3034
return (
31-
<$ColorInput error={fieldState.error?.message} {...field} {...props} />
35+
<$ColorInput
36+
error={fieldState.error?.message}
37+
value={value}
38+
onChange={(e) => {
39+
fieldOnChange(e);
40+
onChange?.(e);
41+
}}
42+
{...field}
43+
{...props}
44+
/>
3245
);
3346
}

‎src/ColorPicker/ColorPicker.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,36 @@ import {
99
} from "@mantine/core";
1010

1111
export type ColorPickerProps<T extends FieldValues> = UseControllerProps<T> &
12-
$ColorPickerProps;
12+
Omit<$ColorPickerProps, "value" | "defaultValue">;
1313

1414
export function ColorPicker<T extends FieldValues>({
1515
name,
1616
control,
1717
defaultValue,
1818
rules,
1919
shouldUnregister,
20+
onChange,
2021
...props
2122
}: ColorPickerProps<T>) {
22-
const { field } = useController<T>({
23+
const {
24+
field: { value, onChange: fieldOnChange, ...field },
25+
} = useController<T>({
2326
name,
2427
control,
2528
defaultValue,
2629
rules,
2730
shouldUnregister,
2831
});
29-
return <$ColorPicker {...field} {...props} />;
32+
33+
return (
34+
<$ColorPicker
35+
value={value}
36+
onChange={(e) => {
37+
fieldOnChange(e);
38+
onChange?.(e);
39+
}}
40+
{...field}
41+
{...props}
42+
/>
43+
);
3044
}

‎src/FileInput/FileInput.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,34 @@ import {
99
} from "@mantine/core";
1010

1111
export type FileInputProps<T extends FieldValues> = UseControllerProps<T> &
12-
$FileInputProps;
12+
Omit<$FileInputProps, "value" | "defaultValue">;
1313

1414
export function FileInput<T extends FieldValues>({
1515
name,
1616
control,
1717
defaultValue,
1818
rules,
1919
shouldUnregister,
20+
multiple,
2021
...props
2122
}: FileInputProps<T>) {
22-
const { field, fieldState } = useController<T>({
23+
const {
24+
field: { value, ...field },
25+
fieldState,
26+
} = useController<T>({
2327
name,
2428
control,
2529
defaultValue,
2630
rules,
2731
shouldUnregister,
2832
});
29-
return <$FileInput error={fieldState.error?.message} {...field} {...props} />;
33+
34+
return (
35+
<$FileInput
36+
value={value}
37+
error={fieldState.error?.message}
38+
{...field}
39+
{...props}
40+
/>
41+
);
3042
}

‎src/Input/Input.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,23 @@ export function Input<T extends FieldValues>({
1616
shouldUnregister,
1717
...props
1818
}: InputProps<T>) {
19-
const { field, fieldState } = useController<T>({
19+
const {
20+
field: { value, ...field },
21+
fieldState,
22+
} = useController<T>({
2023
name,
2124
control,
2225
defaultValue,
2326
rules,
2427
shouldUnregister,
2528
});
26-
return <$Input error={fieldState.error?.message} {...field} {...props} />;
29+
30+
return (
31+
<$Input
32+
value={value}
33+
error={fieldState.error?.message}
34+
{...field}
35+
{...props}
36+
/>
37+
);
2738
}

‎src/JsonInput/JsonInput.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,38 @@ import {
99
} from "@mantine/core";
1010

1111
export type JsonInputProps<T extends FieldValues> = UseControllerProps<T> &
12-
$JsonInputProps;
12+
Omit<$JsonInputProps, "value" | "defaultValue">;
1313

1414
export function JsonInput<T extends FieldValues>({
1515
name,
1616
control,
1717
defaultValue,
1818
rules,
1919
shouldUnregister,
20+
onChange,
2021
...props
2122
}: JsonInputProps<T>) {
22-
const { field, fieldState } = useController<T>({
23+
const {
24+
field: { value, onChange: fieldOnChange, ...field },
25+
fieldState,
26+
} = useController<T>({
2327
name,
2428
control,
2529
defaultValue,
2630
rules,
2731
shouldUnregister,
2832
});
29-
return <$JsonInput error={fieldState.error?.message} {...field} {...props} />;
33+
34+
return (
35+
<$JsonInput
36+
value={value}
37+
onChange={(e) => {
38+
fieldOnChange(e);
39+
onChange?.(e);
40+
}}
41+
error={fieldState.error?.message}
42+
{...field}
43+
{...props}
44+
/>
45+
);
3046
}

0 commit comments

Comments
 (0)