feat: keyPress => keyDown

README.md

@@ -199,6 +199,41 @@ If `accordion` is true, only one panel can be open. Opening another panel will c
 
 If `key` is not provided, the panel's index will be used instead.
 
+#### KeyBoard Event
+
+By default, Collapse will listen `onKeyDown`(<3.7.0 `onKeyPress`) event with `enter` key to toggle panel's active state when `collapsible` is not `disabled`. If you want to disable this behavior, you can prevent the event from bubbling like this:
+
+```jsx
+const App = () => {
+  const items: CollapseProps['items'] = [
+    {
+      label: <input onKeyDown={(e) => e.stopPropagation()} />,
+      children: 'content',
+    },
+    {
+      label: (
+        <div onKeyDown={(e) => e.stopPropagation()}>
+          <CustomComponent />
+        </div>
+      ),
+      children: 'content',
+    },
+    {
+      label: 'title 2',
+      children: 'content 2',
+      collapsible: 'disabled',
+    },
+    {
+      label: 'title 3',
+      children: 'content 3',
+      onItemClick: console.log,
+    },
+  ];
+
+  return <Collapse items={items} />;
+};
+```
+
 ## Development
 
 ```bash

docs/examples/basic.tsx

@@ -6,7 +6,7 @@ import '../../assets/index.less';
 const App = () => {
   const items: CollapseProps['items'] = [
     {
-      label: 'title',
+      label: <input onKeyDown={(e) => e.stopPropagation()} />,
       children: 'content',
     },
     {

src/Panel.tsx

@@ -36,7 +36,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     onItemClick?.(panelKey!);
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) {
       handleItemClick();
     }
@@ -76,7 +76,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     className: headerClassName,
     'aria-expanded': isActive,
     'aria-disabled': disabled,
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyDown,
   };
 
   if (!collapsibleHeader && !collapsibleIcon) {

tests/index.spec.tsx

@@ -396,16 +396,16 @@ describe('collapse', () => {
           second
         </Panel>
         <Panel header="collapse 3" key="3" collapsible="disabled">
-          second
+          third
         </Panel>
       </Collapse>,
     );
 
-    fireEvent.keyPress(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
+    fireEvent.keyDown(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
     jest.runAllTimers();
     expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
 
-    fireEvent.keyPress(container.querySelector('.rc-collapse-header')!, myKeyEvent);
+    fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
     jest.runAllTimers();
 
     expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
@@ -414,7 +414,7 @@ describe('collapse', () => {
       'rc-collapse-content-active',
     );
 
-    fireEvent.keyPress(container.querySelector('.rc-collapse-header')!, myKeyEvent);
+    fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
     jest.runAllTimers();
 
     expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);