fix: 修复 Dropdown 嵌套使用 absolute 时子级菜单项点击无法触发 onClick 的问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shineout",
-  "version": "2.0.32-beta.2",
+  "version": "2.0.32-beta.3",
   "description": "Shein 前端组件库",
   "main": "./lib/index.js",
   "module": "./es/index.js",

site/chunks/Components/Dropdown.js

@@ -130,6 +130,19 @@ const examples = [
     parseTsText: require('!raw-loader!doc/pages/components/Dropdown/test-001-open.tsx'),
 
   },
+  {
+    name: 'test-002-nested-absolute',
+    isTs: true,
+    isTest: true,
+    title: locate(
+      '嵌套 absolute Dropdown \n 验证 Popover 内嵌套 absolute Dropdown 的 item onClick 能正常触发',
+      'Nested absolute Dropdown \n Verify item onClick works in nested absolute Dropdown inside Popover'
+    ),
+    component: require('doc/pages/components/Dropdown/test-002-nested-absolute.tsx').default,
+    rawText: require('!raw-loader!doc/pages/components/Dropdown/test-002-nested-absolute.tsx'),
+    parseTsText: require('!raw-loader!doc/pages/components/Dropdown/test-002-nested-absolute.tsx'),
+
+  },
 ]
 
 const codes = undefined

site/pages/components/Dropdown/test-002-nested-absolute.tsx

@@ -0,0 +1,70 @@
+/**
+ * cn - 嵌套 absolute Dropdown
+ *    -- 验证 Popover 内嵌套 absolute Dropdown 的 item onClick 能正常触发
+ * en - Nested absolute Dropdown
+ *    -- Verify item onClick works in nested absolute Dropdown inside Popover
+ */
+import React from 'react'
+import { Button, Popover, Dropdown, Message, TYPE } from 'shineout'
+
+type DropdownItem = TYPE.Dropdown.Item
+const childrenData = [
+  {
+    content: 'Submenu1',
+    onClick: () => Message.info('Submenu1 clicked'),
+  },
+  {
+    content: 'Submenu2',
+    onClick: () => Message.info('Submenu2 clicked'),
+  },
+]
+
+const getContainer = () => document.getElementById('dropdown-base') as HTMLElement
+const data: DropdownItem[] = [
+  {
+    content: (
+      <div>
+        <Dropdown
+          trigger="hover"
+          placeholder="children dropdown1"
+          data={childrenData}
+          type="link"
+          absolute={getContainer}
+        />
+      </div>
+    ),
+  },
+  {
+    content: (
+      <div>
+        <Dropdown
+          trigger="hover"
+          placeholder="children dropdown2"
+          data={childrenData}
+          type="link"
+          absolute={getContainer}
+        />
+      </div>
+    ),
+  },
+]
+
+const App: React.FC = () => {
+  const handleCollapse = (collapsed: boolean) => {
+    console.log('Dropdown collapsed:', collapsed)
+  }
+  return (
+    <div id="dropdown-base">
+      <Button type="primary">
+        <Popover style={{ padding: '4px 8px' }} trigger="click">
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <Dropdown trigger="hover" onCollapse={handleCollapse} placeholder="Dropdown" data={data} type="link" />
+          </div>
+        </Popover>
+        Hover
+      </Button>
+    </div>
+  )
+}
+
+export default App

site/pages/documentation/changelog/2.x.x.md

@@ -3,6 +3,7 @@
 ### 2.0.32
 - 修复 `Table` 使用 `treeExpandKeys` 展开树形行时，若数据中包含 DOM 引用等不可序列化字段会导致页面崩溃的问题
 - 修复 `Grid` 组件动态生成的样式在微前端场景下被错误劫持导致样式失效的问题
+- 修复 `Dropdown` 嵌套使用 `absolute` 时子级菜单项点击无法触发 onClick 的问题（Regression: since 2.0.29）
 
 ### 2.0.31
 - 新增 RTL 模式下 `Modal`、`Popover`、`Tooltip` 组件的位置自动镜像转换功能

src/Dropdown/index.tsx

@@ -156,14 +156,17 @@ class Dropdown extends PureComponent<DropdownProps, DropDownState> {
 
   toggleDocumentEvent(bind: boolean) {
     const method = bind ? 'addEventListener' : 'removeEventListener'
-    document[method]('click', (this.clickAway as unknown) as EventListener, true)
+    document[method]('mousedown', (this.clickAway as unknown) as EventListener, true)
   }
 
   clickAway(e: React.MouseEvent) {
+    const target = e.target as HTMLElement
+    // 避免 mousedown 与 click 的竞态：点击 placeholder 关闭受控 Dropdown 时，跳过 clickAway，由 handleFocus 处理 toggle
+    if (this.element && getParent(target, `.${dropdownClass('button')}`) && this.element.contains(target)) return
     const { absolute } = this.props
-    const el = getParent(e.target as HTMLElement, 'a')
+    const el = getParent(target, 'a')
     const onSelf = absolute
-      ? getParent(e.target as HTMLElement, `[data-id=${this.dropdownId}]`)
+      ? getParent(target, `[data-id=${this.dropdownId}]`)
       : el === this.element || this.element.contains(el)
     if (el && onSelf && el.getAttribute('data-role') === 'item') return
     this.handleHide(0)

src/index.js

@@ -2,7 +2,7 @@
 
 import * as utils from './utils'
 
-export default { utils, version: '2.0.32-beta.2' }
+export default { utils, version: '2.0.32-beta.3' }
 export { utils }
 export { setLocale } from './locale'
 export { color, style } from './utils/expose'

test/src/Dropdown/Dropdown.close.spec.js

@@ -33,9 +33,9 @@ describe('Dropdown[close]', () => {
         .first()
         .instance().state.show
     ).toBe(true)
-    const click = new UIEvent('click')
-    click.initUIEvent('click')
-    document.dispatchEvent(click)
+    const mousedown = new UIEvent('mousedown')
+    mousedown.initUIEvent('mousedown')
+    document.dispatchEvent(mousedown)
     jest.runAllTimers()
     expect(
       wrapper