fix: Radio type cannot be override (#32463)

close #32459

components/radio/__tests__/group.test.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
-import Radio from '../radio';
-import RadioGroup from '../group';
-import RadioButton from '../radioButton';
+import Radio from '..';
 
 describe('Radio Group', () => {
   function createRadioGroup(props) {
     return (
-      <RadioGroup {...props}>
+      <Radio.Group {...props}>
         <Radio value="A">A</Radio>
         <Radio value="B">B</Radio>
         <Radio value="C">C</Radio>
-      </RadioGroup>
+      </Radio.Group>
     );
   }
 
@@ -22,7 +20,7 @@ describe('Radio Group', () => {
       { label: 'C', value: 'C' },
     ];
 
-    return <RadioGroup {...props} options={options} />;
+    return <Radio.Group {...props} options={options} />;
   }
 
   it('responses hover events', () => {
@@ -30,9 +28,9 @@ describe('Radio Group', () => {
     const onMouseLeave = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <Radio.Group onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         <Radio />
-      </RadioGroup>,
+      </Radio.Group>,
     );
 
     wrapper.find('div').at(0).simulate('mouseenter');
@@ -63,7 +61,7 @@ describe('Radio Group', () => {
     const onChangeRadioGroup = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onChange={onChangeRadioGroup}>
+      <Radio.Group onChange={onChangeRadioGroup}>
         <Radio value="A" onChange={onChange}>
           A
         </Radio>
@@ -73,7 +71,7 @@ describe('Radio Group', () => {
         <Radio value="C" onChange={onChange}>
           C
         </Radio>
-      </RadioGroup>,
+      </Radio.Group>,
     );
     const radios = wrapper.find('input');
 
@@ -87,11 +85,11 @@ describe('Radio Group', () => {
     const onChange = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onChange={onChange}>
-        <RadioButton value="A">A</RadioButton>
-        <RadioButton value="B">B</RadioButton>
-        <RadioButton value="C">C</RadioButton>
-      </RadioGroup>,
+      <Radio.Group onChange={onChange}>
+        <Radio.Button value="A">A</Radio.Button>
+        <Radio.Button value="B">B</Radio.Button>
+        <Radio.Button value="C">C</Radio.Button>
+      </Radio.Group>,
     );
     const radios = wrapper.find('input');
 
@@ -104,7 +102,7 @@ describe('Radio Group', () => {
   it('should only trigger once when in group with options', () => {
     const onChange = jest.fn();
     const options = [{ label: 'Bamboo', value: 'Bamboo' }];
-    const wrapper = mount(<RadioGroup options={options} onChange={onChange} />);
+    const wrapper = mount(<Radio.Group options={options} onChange={onChange} />);
 
     wrapper.find('input').simulate('change');
     expect(onChange).toHaveBeenCalledTimes(1);
@@ -147,9 +145,7 @@ describe('Radio Group', () => {
       { label: 'Apple', value: 'Apple' },
       { label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
     ];
-
-    const wrapper = render(<RadioGroup prefixCls="my-radio" options={options} />);
-
+    const wrapper = render(<Radio.Group prefixCls="my-radio" options={options} />);
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -166,11 +162,46 @@ describe('Radio Group', () => {
     expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
   });
 
+  it('should support data-* or aria-* props', () => {
+    const wrapper = mount(
+      createRadioGroup({
+        'data-radio-group-id': 'radio-group-id',
+        'aria-label': 'radio-group',
+      }),
+    );
+    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
+    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
+  });
+
+  it('Radio type should not be override', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Radio.Group onChange={onChange}>
+        <Radio value={1} type="1">
+          A
+        </Radio>
+        <Radio value={2} type="2">
+          B
+        </Radio>
+        <Radio value={3} type="3">
+          C
+        </Radio>
+        <Radio value={4} type="4">
+          D
+        </Radio>
+      </Radio.Group>,
+    );
+    const radios = wrapper.find('input');
+    radios.at(1).simulate('change');
+    expect(onChange).toHaveBeenCalled();
+    expect(radios.at(1).getDOMNode().type).toBe('radio');
+  });
+
   describe('value is null or undefined', () => {
     it('use `defaultValue` when `value` is undefined', () => {
       const options = [{ label: 'Bamboo', value: 'bamboo' }];
       const wrapper = mount(
-        <RadioGroup defaultValue="bamboo" value={undefined} options={options} />,
+        <Radio.Group defaultValue="bamboo" value={undefined} options={options} />,
       );
       expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
         true,
@@ -180,7 +211,7 @@ describe('Radio Group', () => {
     [undefined, null].forEach(newValue => {
       it(`should set value back when value change back to ${newValue}`, () => {
         const options = [{ label: 'Bamboo', value: 'bamboo' }];
-        const wrapper = mount(<RadioGroup value="bamboo" options={options} />);
+        const wrapper = mount(<Radio.Group value="bamboo" options={options} />);
         expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
           true,
         );
@@ -192,15 +223,4 @@ describe('Radio Group', () => {
       });
     });
   });
-
-  it('should support data-* or aria-* props', () => {
-    const wrapper = mount(
-      createRadioGroup({
-        'data-radio-group-id': 'radio-group-id',
-        'aria-label': 'radio-group',
-      }),
-    );
-    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
-    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
-  });
 });

components/radio/radio.tsx

@@ -49,7 +49,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
     >
-      <RcCheckbox {...radioProps} prefixCls={prefixCls} ref={mergedRef} />
+      <RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef} />
       {children !== undefined ? <span>{children}</span> : null}
     </label>
   );
@@ -59,8 +59,4 @@ const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);
 
 Radio.displayName = 'Radio';
 
-Radio.defaultProps = {
-  type: 'radio',
-};
-
 export default Radio;