Merge pull request #4123 from marmelab/fix_RadioButtonGroupInput

fix RadioButtonGroupInput onChange props
marmelab · Dec 12, 2019 · e434745 · e434745
2 parents 04a5c45 + ee1b590
commit e434745
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 import expect from 'expect';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import {
+    render,
+    cleanup,
+    fireEvent,
+    waitForDomChange,
+} from '@testing-library/react';
 import { Form } from 'react-final-form';
 import { TestTranslationProvider } from 'ra-core';
 
@@ -41,6 +46,30 @@ describe('<RadioButtonGroupInput />', () => {
         expect(input2.checked).toBeFalsy();
     });
 
+    it('should trigger custom onChange when clicking radio button', async () => {
+        const onChange = jest.fn();
+        const { getByLabelText, queryByText } = render(
+            <Form
+                onSubmit={jest.fn}
+                render={() => (
+                    <RadioButtonGroupInput
+                        {...defaultProps}
+                        label="Credit card"
+                        onChange={onChange}
+                    />
+                )}
+            />
+        );
+        expect(queryByText('Credit card')).not.toBeNull();
+        const input1 = getByLabelText('VISA') as HTMLInputElement;
+        fireEvent.click(input1);
+        expect(onChange).toBeCalledWith('visa');
+
+        const input2 = getByLabelText('Mastercard') as HTMLInputElement;
+        fireEvent.click(input2);
+        expect(onChange).toBeCalledWith('mastercard');
+    });
+
     it('should use the value provided by final-form as the initial input value', () => {
         const { getByLabelText } = render(
             <Form

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.tsx
@@ -109,6 +109,7 @@ export const RadioButtonGroupInput: FunctionComponent<
         id,
         isRequired,
         meta: { error, touched },
+        input,
     } = useInput({
         format,
         onBlur,
@@ -140,6 +141,7 @@ export const RadioButtonGroupInput: FunctionComponent<
             <RadioGroup id={id} row={row} {...options}>
                 {choices.map(choice => (
                     <RadioButtonGroupInputItem
+                        {...input}
                         key={get(choice, optionValue)}
                         choice={choice}
                         optionText={optionText}

diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx
@@ -10,6 +10,7 @@ const RadioButtonGroupInputItem = ({
     optionValue,
     source,
     translateChoice,
+    onChange,
 }) => {
     const { getChoiceText, getChoiceValue } = useChoices({
         optionText,
@@ -19,7 +20,7 @@ const RadioButtonGroupInputItem = ({
     const label = getChoiceText(choice);
     const value = getChoiceValue(choice);
     const {
-        input: { type, onChange, ...inputProps },
+        input: { type, ...inputProps },
     } = useField(source, {
         type: 'radio',
         value,
@@ -35,8 +36,8 @@ const RadioButtonGroupInputItem = ({
                 <Radio
                     id={nodeId}
                     color="primary"
-                    onChange={() => onChange(value)}
                     {...inputProps}
+                    onChange={(_, isActive) => isActive && onChange(value)}
                 />
             }
         />