Pass name prop down to the table selection input (#9054)

components/table/SelectionBox.tsx

@@ -45,26 +45,24 @@ export default class SelectionBox extends React.Component<SelectionBoxProps, Sel
   }
 
   render() {
-    const { type, rowIndex, disabled, onChange } = this.props;
+    const { type, rowIndex, ...rest } = this.props;
     const { checked } = this.state;
 
     if (type === 'radio') {
       return (
         <Radio
-          disabled={disabled}
-          onChange={onChange}
-          value={rowIndex}
           checked={checked}
+          value={rowIndex}
+          {...rest}
+        />
+      );
+    } else {
+      return (
+        <Checkbox
+          checked={checked}
+          {...rest}
         />
       );
     }
-
-    return (
-      <Checkbox
-        checked={checked}
-        disabled={disabled}
-        onChange={onChange}
-      />
-    );
   }
 }

components/table/Table.tsx

@@ -597,9 +597,9 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
             type={type}
             store={this.store}
             rowIndex={rowIndex}
-            disabled={props.disabled}
             onChange={handleChange}
             defaultSelection={this.getDefaultSelection()}
+            {...props}
           />
         </span>
       );

components/table/__tests__/SelectionBox.test.js

@@ -3,16 +3,18 @@ import { mount } from 'enzyme';
 import createStore from '../createStore';
 import SelectionBox from '../SelectionBox';
 
+const getDefaultStore = (selectedRowKeys) => {
+  return createStore({
+    selectedRowKeys: selectedRowKeys || [],
+    selectionDirty: false,
+  });
+};
+
 describe('SelectionBox', () => {
   it('unchecked by selectedRowKeys ', () => {
-    const store = createStore({
-      selectedRowKeys: [],
-      selectionDirty: false,
-    });
-
     const wrapper = mount(
       <SelectionBox
-        store={store}
+        store={getDefaultStore()}
         rowIndex="1"
         disabled={false}
         onChange={() => {}}
@@ -24,14 +26,9 @@ describe('SelectionBox', () => {
   });
 
   it('checked by selectedRowKeys ', () => {
-    const store = createStore({
-      selectedRowKeys: ['1'],
-      selectionDirty: false,
-    });
-
     const wrapper = mount(
       <SelectionBox
-        store={store}
+        store={getDefaultStore(['1'])}
         rowIndex="1"
         disabled={false}
         onChange={() => {}}
@@ -43,14 +40,9 @@ describe('SelectionBox', () => {
   });
 
   it('checked by defaultSelection', () => {
-    const store = createStore({
-      selectedRowKeys: [],
-      selectionDirty: false,
-    });
-
     const wrapper = mount(
       <SelectionBox
-        store={store}
+        store={getDefaultStore()}
         rowIndex="1"
         disabled={false}
         onChange={() => {}}
@@ -62,11 +54,7 @@ describe('SelectionBox', () => {
   });
 
   it('checked when store change', () => {
-    const store = createStore({
+    const store = getDefaultStore();
-      selectedRowKeys: [],
-      selectionDirty: false,
-    });
-
     const wrapper = mount(
       <SelectionBox
         store={store}
@@ -84,4 +72,49 @@ describe('SelectionBox', () => {
 
     expect(wrapper.state()).toEqual({ checked: true });
   });
+
+  it('passes props to Checkbox', () => {
+    const checkboxProps = {
+      name: 'testName',
+      id: 'testId',
+    };
+    const wrapper = mount(
+      <SelectionBox
+        store={getDefaultStore()}
+        rowIndex="1"
+        disabled={false}
+        onChange={() => {
+        }}
+        defaultSelection={['1']}
+        {...checkboxProps}
+      />
+    );
+    wrapper.find('Checkbox').forEach((box) => {
+      expect(box.props().name).toEqual(checkboxProps.name);
+      expect(box.props().id).toEqual(checkboxProps.id);
+    });
+  });
+
+  it('passes props to Radios', () => {
+    const radioProps = {
+      name: 'testName',
+      id: 'testId',
+    };
+    const wrapper = mount(
+      <SelectionBox
+        store={getDefaultStore()}
+        rowIndex="1"
+        disabled={false}
+        onChange={() => {
+        }}
+        defaultSelection={['1']}
+        type="radio"
+        {...radioProps}
+      />
+    );
+    wrapper.find('Radio').forEach((radio) => {
+      expect(radio.props().name).toEqual(radioProps.name);
+      expect(radio.props().id).toEqual(radioProps.id);
+    });
+  });
 });

components/table/__tests__/Table.rowSelection.test.js

@@ -77,6 +77,7 @@ describe('Table.rowSelection', () => {
     const rowSelection = {
       getCheckboxProps: record => ({
         disabled: record.name === 'Lucy',
+        name: record.name,
       }),
     };
 
@@ -84,7 +85,9 @@ describe('Table.rowSelection', () => {
     const checkboxes = wrapper.find('input');
 
     expect(checkboxes.at(1).props().disabled).toBe(false);
+    expect(checkboxes.at(1).props().name).toEqual(data[0].name);
     expect(checkboxes.at(2).props().disabled).toBe(true);
+    expect(checkboxes.at(2).props().name).toEqual(data[1].name);
   });
 
   it('works with pagination', () => {

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -9302,6 +9302,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
                         >
                           <input
                             class="ant-checkbox-input"
+                            name="John Brown"
                             type="checkbox"
                           />
                           <span
@@ -9350,6 +9351,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
                         >
                           <input
                             class="ant-checkbox-input"
+                            name="Jim Green"
                             type="checkbox"
                           />
                           <span
@@ -9398,6 +9400,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
                         >
                           <input
                             class="ant-checkbox-input"
+                            name="Joe Black"
                             type="checkbox"
                           />
                           <span
@@ -9447,6 +9450,7 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
                           <input
                             class="ant-checkbox-input"
                             disabled=""
+                            name="Disabled User"
                             type="checkbox"
                           />
                           <span

components/table/demo/row-selection.md

@@ -60,6 +60,7 @@ const rowSelection = {
   },
   getCheckboxProps: record => ({
     disabled: record.name === 'Disabled User', // Column configuration not to be checked
+    name: record.name,
   }),
 };
 

components/table/interface.tsx

@@ -152,6 +152,7 @@ export interface SelectionBoxProps {
   type?: RowSelectionType;
   defaultSelection: string[];
   rowIndex: string;
+  name?: string;
   disabled?: boolean;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
 }