Fix RadioButtonGroupInput value binding

marmelab · Nov 13, 2019 · e28580f · e28580f
1 parent 3fb1092
commit e28580f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -107,7 +107,6 @@ export const RadioButtonGroupInput: FunctionComponent<
 
     const {
         id,
-        input,
         isRequired,
         meta: { error, touched },
     } = useInput({
@@ -118,7 +117,6 @@ export const RadioButtonGroupInput: FunctionComponent<
         parse,
         resource,
         source,
-        type: 'radio',
         validate,
         ...rest,
     });
@@ -139,7 +137,7 @@ export const RadioButtonGroupInput: FunctionComponent<
                 />
             </FormLabel>
 
-            <RadioGroup id={id} row={row} {...input} {...options}>
+            <RadioGroup id={id} row={row} {...options}>
                 {choices.map(choice => (
                     <RadioButtonGroupInputItem
                         key={get(choice, optionValue)}

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useField } from 'react-final-form';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 import { useChoices } from 'ra-core';
@@ -15,16 +16,22 @@ const RadioButtonGroupInputItem = ({
         optionValue,
         translateChoice,
     });
+    const label = getChoiceText(choice);
+    const value = getChoiceValue(choice);
+    const {
+        input: { type, ...inputProps },
+    } = useField(source, {
+        type: 'radio',
+        value,
+    });
 
-    const choiceName = getChoiceText(choice);
-    const nodeId = `${source}_${getChoiceValue(choice)}`;
+    const nodeId = `${source}_${label}`;
 
     return (
         <FormControlLabel
+            label={label}
             htmlFor={nodeId}
-            value={getChoiceValue(choice)}
-            control={<Radio id={nodeId} color="primary" />}
-            label={choiceName}
+            control={<Radio id={nodeId} color="primary" {...inputProps} />}
         />
     );
 };