fix(Dropdown.Item): trigger the click event of "Dropdown. Item" (#6480)…

… (#6481)

* fix(Dropdown.Item): trigger the click event of "Dropdown. Item"  (#6480)

* test(Dropdown.Item): add Dropdown.Item click test

* doc(Dropdown.Item): add click event description

src/components/dropdown/dropdown.tsx

@@ -89,8 +89,9 @@ const Dropdown = forwardRef<DropdownRef, PropsWithChildren<DropdownProps>>(
       if (isValidElement<ComponentProps<typeof Item>>(child)) {
         const childProps = {
           ...child.props,
-          onClick: () => {
+          onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
             changeActive(child.key as string)
+            child.props.onClick?.(event)
           },
           active: child.key === value,
           arrow:

src/components/dropdown/index.en.md

@@ -42,3 +42,4 @@ It is suitable for filtering, sorting and changing the display range or order of
 | highlight | Highlight | `boolean` | `false` |
 | key | The unique value | `string` | - |
 | title | Title | `ReactNode` | - |
+| onClick | The click event | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |

src/components/dropdown/index.zh.md

@@ -34,11 +34,12 @@
 
 ### 属性
 
-| 属性           | 说明                        | 类型              | 默认值  |
-| -------------- | --------------------------- | ----------------- | ------- |
-| arrow          | 自定义 arrow                | `React.ReactNode` | -       |
-| destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean`         | `false` |
-| forceRender    | 被隐藏时是否渲染 `DOM` 结构 | `boolean`         | `false` |
-| highlight      | 高亮                        | `boolean`         | `false` |
-| key            | 唯一值                      | `string`          | -       |
-| title          | 标题                        | `ReactNode`       | -       |
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| arrow | 自定义 arrow | `React.ReactNode` | - |
+| destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean` | `false` |
+| forceRender | 被隐藏时是否渲染 `DOM` 结构 | `boolean` | `false` |
+| highlight | 高亮 | `boolean` | `false` |
+| key | 唯一值 | `string` | - |
+| title | 标题 | `ReactNode` | - |
+| onClick | 点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |

src/components/dropdown/tests/dropdown.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { fireEvent, render, screen, waitFor } from 'testing'
 import Dropdown from '..'
 
@@ -83,4 +83,28 @@ describe('Dropdown', () => {
     )
     expect(screen.getByText('content')).toBeInTheDocument()
   })
+
+  test('trigger the click of Dropdown.Item ', () => {
+    const ClickTest = () => {
+      const [count, setCount] = useState(0)
+      return (
+        <Dropdown>
+          <Dropdown.Item
+            onClick={() => setCount(count + 1)}
+            title='sorter'
+            key='sorter'
+          >
+            click{count}
+          </Dropdown.Item>
+        </Dropdown>
+      )
+    }
+
+    render(<ClickTest />)
+
+    fireEvent.click(screen.getByText('sorter'))
+    expect(screen.getByText('click1'))
+    fireEvent.click(screen.getByText('sorter'))
+    expect(screen.getByText('click2'))
+  })
 })