fix expandRowByClick (#470)

* Add test case

* fix expandRowByClick and expandIcon bug

* add test case

Author: afc163

examples/expandIcon.tsx

@@ -24,7 +24,9 @@ function CustomExpandIcon(props) {
   return (
     <a
       className="expand-row-icon"
-      onClick={e => props.onExpand(props.record, e)}
+      onClick={e => {
+        props.onExpand(props.record, e);
+      }}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: text }}
       style={{ color: 'blue', cursor: 'pointer' }}
@@ -42,6 +44,7 @@ const Demo = () => (
     columns={columns}
     data={data}
     expandable={{
+      expandRowByClick: true,
       expandedRowRender: record => <p>extra: {record.a}</p>,
       onExpand,
       expandIcon: CustomExpandIcon,

src/Table.tsx

@@ -343,7 +343,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       expandedKeys: mergedExpandedKeys,
       getRowKey,
       // https://github.com/ant-design/ant-design/issues/23894
-      onTriggerExpand: expandRowByClick && expandIcon ? () => {} : onTriggerExpand,
+      onTriggerExpand,
       expandIcon: mergedExpandIcon,
       expandIconColumnIndex,
       direction,

src/hooks/useColumns.tsx

@@ -118,6 +118,7 @@ function useColumns<RecordType>(
     rowExpandable,
     expandIconColumnIndex,
     direction,
+    expandRowByClick,
   }: {
     prefixCls?: string;
     columns?: ColumnsType<RecordType>;
@@ -130,6 +131,7 @@ function useColumns<RecordType>(
     rowExpandable?: (record: RecordType) => boolean;
     expandIconColumnIndex?: number;
     direction?: 'ltr' | 'rtl';
+    expandRowByClick?: boolean;
   },
   transformColumns: (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>,
 ): [ColumnsType<RecordType>, ColumnType<RecordType>[]] {
@@ -156,13 +158,25 @@ function useColumns<RecordType>(
           const expanded = expandedKeys.has(rowKey);
           const recordExpandable = rowExpandable ? rowExpandable(record) : true;
 
-          return expandIcon({
+          const icon = expandIcon({
             prefixCls,
             expanded,
             expandable: recordExpandable,
             record,
             onExpand: onTriggerExpand,
           });
+          return React.isValidElement(icon)
+            ? React.cloneElement(icon, {
+                onClick: (e: MouseEvent) => {
+                  if (expandRowByClick) {
+                    e.stopPropagation();
+                  }
+                  if (icon && icon.props && icon.props.onClick) {
+                    icon.props.onClick(e);
+                  }
+                },
+              })
+            : icon;
         },
       };
 

tests/ExpandRow.spec.js

@@ -371,38 +371,51 @@ describe('Table.Expand', () => {
 
   // https://github.com/ant-design/ant-design/issues/23894
   it('should be collapsible when use `expandIcon` & `expandRowByClick`', () => {
-    const data = [{ key: 0, name: 'Lucy', age: 27, children: [{ key: 1, name: 'Jack', age: 28 }] }];
+    const data = [{ key: 0, name: 'Lucy', age: 27 }];
     const onExpand = jest.fn();
     const wrapper = mount(
       createTable({
         expandable: {
           expandedRowRender,
           expandRowByClick: true,
-          expandIcon: ({ onExpand: onIconExpand }) => (
-            <span className="custom-expand-icon" onClick={onIconExpand} />
-          ),
           onExpand,
+          expandIcon: ({ onExpand: onIconExpand, record }) => (
+            <span className="custom-expand-icon" onClick={() => onIconExpand(record)} />
+          ),
         },
         data,
       }),
     );
+    expect(wrapper.find('.rc-table-expanded-row').length).toBe(0);
     wrapper
       .find('.custom-expand-icon')
       .first()
       .simulate('click');
     expect(onExpand).toHaveBeenCalledWith(true, data[0]);
     expect(onExpand).toHaveBeenCalledTimes(1);
+    expect(
+      wrapper
+        .find('.rc-table-expanded-row')
+        .first()
+        .getDOMNode().style.display,
+    ).toBe('');
     wrapper
       .find('.custom-expand-icon')
       .first()
       .simulate('click');
     expect(onExpand).toHaveBeenCalledWith(false, data[0]);
     expect(onExpand).toHaveBeenCalledTimes(2);
+    expect(
+      wrapper
+        .find('.rc-table-expanded-row')
+        .first()
+        .getDOMNode().style.display,
+    ).toBe('none');
   });
 
   // https://github.com/ant-design/ant-design/issues/23894
   it('should be collapsible when `expandRowByClick` without custom `expandIcon`', () => {
-    const data = [{ key: 0, name: 'Lucy', age: 27, children: [{ key: 1, name: 'Jack', age: 28 }] }];
+    const data = [{ key: 0, name: 'Lucy', age: 27 }];
     const onExpand = jest.fn();
     const wrapper = mount(
       createTable({
@@ -427,4 +440,57 @@ describe('Table.Expand', () => {
     expect(onExpand).toHaveBeenCalledWith(false, data[0]);
     expect(onExpand).toHaveBeenCalledTimes(2);
   });
+
+  it('should be collapsible when `expandRowByClick` with custom `expandIcon` and event.stopPropagation', () => {
+    const data = [{ key: 0, name: 'Lucy', age: 27 }];
+    const onExpand = jest.fn();
+    const wrapper = mount(
+      createTable({
+        expandable: {
+          expandedRowRender,
+          expandRowByClick: true,
+          onExpand,
+          expandIcon: ({ onExpand: onIconExpand, record }) => (
+            <span
+              className="custom-expand-icon"
+              onClick={e => {
+                e.stopPropagation();
+                onIconExpand(record);
+              }}
+            />
+          ),
+        },
+        data,
+      }),
+    );
+    wrapper
+      .find('.custom-expand-icon')
+      .first()
+      .simulate('click');
+    expect(onExpand).toHaveBeenCalledWith(true, data[0]);
+    expect(onExpand).toHaveBeenCalledTimes(1);
+    wrapper
+      .find('.custom-expand-icon')
+      .first()
+      .simulate('click');
+    expect(onExpand).toHaveBeenCalledWith(false, data[0]);
+    expect(onExpand).toHaveBeenCalledTimes(2);
+  });
+
+  it('support invalid expandIcon', () => {
+    const data = [{ key: 0, name: 'Lucy', age: 27 }];
+    const onExpand = jest.fn();
+    const wrapper = mount(
+      createTable({
+        expandable: {
+          expandedRowRender,
+          expandRowByClick: true,
+          onExpand,
+          expandIcon: () => null,
+        },
+        data,
+      }),
+    );
+    expect(wrapper.find('.rc-table-expanded-row').length).toBe(0);
+  });
 });