Skip to content

fix: 修复了嵌套 Dropdown 点击子菜单项时，父级菜单会意外关闭导致点击事件丢失的问题 #3119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xshuxin wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: 修复了嵌套 Dropdown 点击子菜单项时，父级菜单会意外关闭导致点击事件丢失的问题 #3119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ab6708
fix: 修复了嵌套 Dropdown 点击子菜单项时，父级菜单会意外关闭导致点击事件丢失的问题
Jan 21, 2026
919cb48
fix: 修复误操作使用content导致嵌套子菜单的点击事件无法触发的问题
Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/semi-ui/dropdown/__test__/dropdown.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React, { useState } from 'react';
import { Icon, Dropdown, Tag } from '../../index';
import { string } from 'prop-types';
import { noop, drop } from 'lodash';
Expand Down Expand Up @@ -309,4 +310,5 @@ describe('Dropdown', () => {
DD.update()
expect(DD.find('.semi-dropdown-menu').children().length).toEqual(menu2.length - 1);
});

});
65 changes: 64 additions & 1 deletion packages/semi-ui/dropdown/_story/dropdown.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,4 +395,67 @@ export function Fix1606() {
<TextArea style={{ width: 200 }} defaultValue='请尝试在此处使用上下箭头切换当前行'/>
</Dropdown>
);
}
}

export function NestedDropdownIssue() {
const [visible, setVisible] = React.useState(false);
return (
<div>
<Dropdown
trigger="custom"
visible={visible}
onClickOutSide={() => {
console.log('1. Parent onClickOutSide triggered, closing');
setVisible(false);
}}
render={
<Dropdown.Menu>
<Dropdown.Title>Render 嵌套</Dropdown.Title>
<Dropdown
position="rightTop"
render={
<Dropdown.Menu>
<Dropdown
position="rightTop"
render={
<Dropdown.Menu>
<Dropdown.Item onClick={() => console.log('3. Grandchild menu onClick triggered')}>
Grandchild Item (Click me)
</Dropdown.Item>
<Dropdown.Item onClick={() => console.log('3. Grandchild Item 2 clicked')}>
Grandchild Item 2
</Dropdown.Item>
</Dropdown.Menu>
}
>
<Dropdown.Item>Hover to expand grandchild</Dropdown.Item>
</Dropdown>
<Dropdown.Item onClick={() => console.log('2. Child menu onClick triggered')}>
Child Item
</Dropdown.Item>
</Dropdown.Menu>
}
>
<Dropdown.Item>Hover to expand child menu</Dropdown.Item>
</Dropdown>
<Dropdown.Title>Menu 嵌套</Dropdown.Title>
<Dropdown
position="rightTop"
trigger="click"
menu={[
{ node: 'item', name: 'Menu Child Item 1', onClick: () => console.log('2. Menu Child Item 1 clicked') },
{ node: 'item', name: 'Menu Child Item 2', onClick: () => console.log('2. Menu Child Item 2 clicked') },
{ node: 'divider' },
{ node: 'item', name: 'Menu Child Item 3', onClick: () => console.log('2. Menu Child Item 3 clicked') },
]}
>
<Dropdown.Item>Click to expand child menu</Dropdown.Item>
</Dropdown>
</Dropdown.Menu>
}
>
<Button onClick={() => setVisible(true)}>Open Dropdown</Button>
</Dropdown>
</div>
);
}
7 changes: 5 additions & 2 deletions packages/semi-ui/dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,10 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
}
return (
<DropdownContext.Provider value={contextValue}>
<div className={className} style={style}>
<div
className={className}
style={style}
>
<div className={`${prefixCls}-content`} x-semi-prop="render">{content}</div>
</div>
</DropdownContext.Provider>
Expand Down Expand Up @@ -238,7 +241,6 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
zIndex={zIndex}
motion={motion}
margin={margin}
content={pop}
className={className}
prefixCls={prefixCls}
spacing={spacing}
Expand All @@ -249,6 +251,7 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
returnFocusOnClose={true}
ref={this.tooltipRef}
{...attr}
content={pop}
>
{React.isValidElement(children) ?
React.cloneElement(children, {
Expand Down