From f0a44cebaaf5fbbc074bc8fbd7f6f7e8da925697 Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Fri, 13 Jan 2023 14:49:59 +0800
Subject: [PATCH 1/2] test: add case

---
 tests/index.spec.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index b4ec8ae1..400ae862 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -652,4 +652,31 @@ describe('collapse', () => {
     expect(ref.current).toBe(container.firstChild);
     expect(panelRef.current).toBe(container.querySelector('.rc-collapse-item'));
   });
+
+  // https://github.com/react-component/collapse/issues/235
+  it('onItemClick should work', () => {
+    const onItemClick = jest.fn();
+    const { container } = render(
+      <Collapse>
+        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
+          first
+        </Panel>
+      </Collapse>,
+    );
+    fireEvent.click(container.querySelector('.rc-collapse-header')!);
+    expect(onItemClick).toHaveBeenCalled();
+  });
+
+  it('onItemClick should not work when collapsible is disabled', () => {
+    const onItemClick = jest.fn();
+    const { container } = render(
+      <Collapse collapsible="disabled">
+        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
+          first
+        </Panel>
+      </Collapse>,
+    );
+    fireEvent.click(container.querySelector('.rc-collapse-header')!);
+    expect(onItemClick).not.toHaveBeenCalled();
+  });
 });

From a18f0480635b47090608f71ad92c975d475e3971 Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Fri, 13 Jan 2023 15:08:13 +0800
Subject: [PATCH 2/2] fix: fix CollapsePanel onItemClick not triggering error

---
 src/Collapse.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 4f1bc24d..1c51e11c 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import React from 'react';
-import type { CollapseProps, CollapsibleType } from './interface';
+import type { CollapsePanelProps, CollapseProps, CollapsibleType } from './interface';
 import CollapsePanel from './Panel';
 
 function getActiveKeysArray(activeKey: React.Key | React.Key[]) {
@@ -56,7 +56,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     });
 
   // ======================== Children ========================
-  const getNewChild = (child: React.ReactElement, index: number) => {
+  const getNewChild = (child: React.ReactElement<CollapsePanelProps>, index: number) => {
     if (!child) return null;
 
     const key = child.key || String(index);
@@ -66,6 +66,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
       headerClass,
       destroyInactivePanel: childDestroyInactivePanel,
       collapsible: childCollapsible,
+      onItemClick: childOnItemClick,
     } = child.props;
 
     let isActive = false;
@@ -77,6 +78,12 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
 
     const mergeCollapsible: CollapsibleType = childCollapsible ?? collapsible;
 
+    const handleItemClick = (value: React.Key) => {
+      if (mergeCollapsible === 'disabled') return;
+      onClickItem(value);
+      childOnItemClick?.(value);
+    };
+
     const childProps = {
       key,
       panelKey: key,
@@ -88,7 +95,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
       openMotion,
       accordion,
       children: child.props.children,
-      onItemClick: mergeCollapsible === 'disabled' ? null : onClickItem,
+      onItemClick: handleItemClick,
       expandIcon,
       collapsible: mergeCollapsible,
     };