From 184c72a2e107b599e0856d83b6dd11f5e8d19302 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Mon, 9 Dec 2019 12:49:07 -0300
Subject: [PATCH] Fix option not being checked when numeric ids are used

---
 .../src/input/RadioButtonGroupInput.spec.tsx  | 22 +++++++++++++++++++
 .../src/input/RadioButtonGroupInputItem.tsx   | 11 ++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
index ae1c8603782..83bf5d8ded4 100644
--- 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
index 3fbf345ebf0..14b79a02ddf 100644
--- 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}
+                />
+            }
         />
     );
 };