fix: Table expand icon not clickable when expandRowByClick is set (#20808)

components/table/ExpandIcon.tsx

@@ -23,7 +23,10 @@ function renderExpandIcon(locale: TableLocale) {
     return (
       <button
         type="button"
-        onClick={e => onExpand(record, e!)}
+        onClick={e => {
+          onExpand(record, e!);
+          e.stopPropagation();
+        }}
         className={classNames(iconPrefix, {
           [`${iconPrefix}-spaced`]: !expandable,
           [`${iconPrefix}-expanded`]: expandable && expanded,

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

@@ -11,19 +11,27 @@ const columns = [
   },
 ];
 
+const John = {
+  key: '1',
+  firstName: 'John',
+  lastName: 'Brown',
+  age: 32,
+};
+
+const Jim = {
+  key: '2',
+  firstName: 'Jim',
+  lastName: 'Green',
+  age: 42,
+};
+
 const data = [
   {
-    key: '1',
-    firstName: 'John',
-    lastName: 'Brown',
-    age: 32,
+    ...John,
 
     children: [
       {
-        key: '2',
-        firstName: 'Jim',
-        lastName: 'Green',
-        age: 42,
+        ...Jim,
       },
     ],
   },
@@ -43,4 +51,39 @@ describe('Table.expand', () => {
     const wrapper = mount(<Table columns={[]} dataSource={data} expandIconColumnIndex={1} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('expandRowByClick should not block click icon', () => {
+    const wrapper = mount(
+      <Table
+        columns={columns}
+        dataSource={[John, Jim]}
+        expandable={{
+          expandRowByClick: true,
+          expandedRowRender: () => '',
+        }}
+      />,
+    );
+
+    wrapper
+      .find('.ant-table-row-expand-icon')
+      .first()
+      .simulate('click');
+    expect(
+      wrapper
+        .find('.ant-table-row-expand-icon')
+        .first()
+        .hasClass('ant-table-row-expand-icon-expanded'),
+    ).toBeTruthy();
+
+    wrapper
+      .find('.ant-table-row-expand-icon')
+      .first()
+      .simulate('click');
+    expect(
+      wrapper
+        .find('.ant-table-row-expand-icon')
+        .first()
+        .hasClass('ant-table-row-expand-icon-collapsed'),
+    ).toBeTruthy();
+  });
 });