diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx index 83bf5d8ded4..11fd1a3a536 100644 --- 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('', () => { expect(input2.checked).toBeFalsy(); }); + it('should trigger custom onChange when clicking radio button', async () => { + const onChange = jest.fn(); + const { getByLabelText, queryByText } = render( +
( + + )} + /> + ); + 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( {choices.map(choice => ( { 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 = ({ onChange(value)} {...inputProps} + onChange={(_, isActive) => isActive && onChange(value)} /> } />