fix(ant): fix radio, make initial values work

Author: rvsia

packages/ant-component-mapper/src/radio/radio.js

@@ -5,26 +5,23 @@ import { wrapperProps } from '@data-driven-forms/common/multiple-choice-list';
 import FormGroup from '../form-group';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
-const RadioOption = ({ name, option, ...rest }) => {
-  const { input } = useFieldApi({ name, type: 'radio', value: option.value });
-  return (
-    <AntRadio key={`${name}-${option.value}`} {...input} id={`${name}-${option.value}`} {...rest}>
-      {option.label}
-    </AntRadio>
-  );
-};
+const RadioOption = ({ name, option: { label, value, ...rest } }) => (
+  <AntRadio key={`${name}-${value}`} id={`${name}-${value}`} value={value} {...rest}>
+    {label}
+  </AntRadio>
+);
 
 RadioOption.propTypes = {
   name: PropTypes.string.isRequired,
   option: PropTypes.shape({ label: PropTypes.string.isRequired, value: PropTypes.any.isRequired }).isRequired,
 };
 
-const Radio = ({ name, ...props }) => {
-  const { options, isDisabled, label, isRequired, helperText, description, isReadOnly, meta, validateOnMount, FormItemProps, ...rest } = useFieldApi({
-    ...props,
-    name,
-    type: 'radio',
-  });
+const Radio = ({ name, component, ...props }) => {
+  const { options, isDisabled, label, isRequired, helperText, description, isReadOnly, meta, validateOnMount, FormItemProps, input, ...rest } =
+    useFieldApi({
+      ...props,
+      name,
+    });
 
   return (
     <FormGroup
@@ -36,7 +33,7 @@ const Radio = ({ name, ...props }) => {
       FormItemProps={FormItemProps}
       isRequired={isRequired}
     >
-      <AntRadio.Group name={name} disabled={isDisabled || isReadOnly} {...rest}>
+      <AntRadio.Group name={name} disabled={isDisabled || isReadOnly} {...input} {...rest}>
         {options.map((option) => (
           <RadioOption key={option.value} name={name} option={option} />
         ))}
@@ -58,6 +55,7 @@ Radio.propTypes = {
   isReadOnly: PropTypes.bool,
   description: PropTypes.node,
   FormItemProps: PropTypes.object,
+  component: PropTypes.string,
 };
 
 Radio.defaultProps = {

packages/ant-component-mapper/src/tests/radio.test.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { FormRenderer } from '@data-driven-forms/react-form-renderer';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { componentMapper, FormTemplate } from '../index';
+
+describe('<Radio />', () => {
+  let initialProps;
+  let onSubmit;
+
+  const schema = {
+    fields: [
+      {
+        component: 'radio',
+        label: 'Radio',
+        name: 'radio',
+        initialValue: '2',
+        options: [
+          {
+            label: 'Dogs',
+            value: '1',
+          },
+          {
+            label: 'Cats',
+            value: '2',
+          },
+          {
+            label: 'Hamsters',
+            value: '3',
+          },
+        ],
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    onSubmit = jest.fn();
+    initialProps = {
+      onSubmit: (values) => onSubmit(values),
+      componentMapper,
+      FormTemplate: (props) => <FormTemplate {...props} />,
+      schema,
+    };
+  });
+
+  it('initialValues work', async () => {
+    render(<FormRenderer {...initialProps} initialValues={{ radio: '2' }} />);
+
+    expect([...screen.getAllByRole('radio')].map((r) => [r.name, r.value, r.checked])).toEqual([
+      ['radio', '1', false],
+      ['radio', '2', true],
+      ['radio', '3', false],
+    ]);
+
+    await act(async () => {
+      userEvent.click(screen.getByText('Submit'));
+    });
+
+    expect(onSubmit).toHaveBeenLastCalledWith({ radio: '2' });
+
+    userEvent.click(screen.getByText('Hamsters'));
+
+    expect([...screen.getAllByRole('radio')].map((r) => [r.name, r.value, r.checked])).toEqual([
+      ['radio', '1', false],
+      ['radio', '2', false],
+      ['radio', '3', true],
+    ]);
+
+    await act(async () => {
+      userEvent.click(screen.getByText('Submit'));
+    });
+
+    expect(onSubmit).toHaveBeenLastCalledWith({ radio: '3' });
+  });
+});