Merge pull request #4128 from m4theushw/fix-radiobuttongroupinput-num…

…eric-ids [RFR] Fix option not being checked when numeric ids are used
marmelab · Dec 10, 2019 · abc2323 · abc2323
2 parents c658516 + 184c72a
commit abc2323
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
@@ -57,6 +57,28 @@ describe('<RadioButtonGroupInput />', () => {
         ).toBeTruthy();
     });
 
+    it('should work correctly when ids are numbers', () => {
+        const choices = [
+            { id: 1, name: 'VISA' },
+            { id: 2, name: 'Mastercard' },
+        ];
+        const { getByLabelText } = render(
+            <Form
+                onSubmit={jest.fn}
+                render={() => (
+                    <RadioButtonGroupInput
+                        {...defaultProps}
+                        choices={choices}
+                    />
+                )}
+            />
+        );
+        const input = getByLabelText('Mastercard') as HTMLInputElement;
+        expect(input.checked).toBe(false);
+        fireEvent.click(input);
+        expect(input.checked).toBe(true);
+    });
+
     it('should use optionValue as value identifier', () => {
         const { getByLabelText } = render(
             <Form

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
@@ -19,7 +19,7 @@ const RadioButtonGroupInputItem = ({
     const label = getChoiceText(choice);
     const value = getChoiceValue(choice);
     const {
-        input: { type, ...inputProps },
+        input: { type, onChange, ...inputProps },
     } = useField(source, {
         type: 'radio',
         value,
@@ -31,7 +31,14 @@ const RadioButtonGroupInputItem = ({
         <FormControlLabel
             label={label}
             htmlFor={nodeId}
-            control={<Radio id={nodeId} color="primary" {...inputProps} />}
+            control={
+                <Radio
+                    id={nodeId}
+                    color="primary"
+                    onChange={() => onChange(value)}
+                    {...inputProps}
+                />
+            }
         />
     );
 };