fix: the repeated calling of multi-level Trigger triggerOpen method #564
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Walkthrough修改了 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant Trigger as 触发组件
participant Popup as 弹出层
User->>Trigger: 鼠标进入触发区
Trigger->>Popup:（若为 hover）调用 onMouseEnterCallback -> clearDelay() -> 保持/打开 popup
User->>Popup: 鼠标进入 popup (onPopupMouseEnter)
Popup->>Popup: clearDelay()
alt (mergedOpen || inMotion) && 事件目标在 popup 内
Popup->>Popup: 保持或重开 popup
end
User->>Popup: 鼠标离开 popup (onPopupMouseLeave)
Popup->>Popup: 根据包含判断触发延迟关闭或保持
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes（无发现超出关联 issue 目标的代码更改） Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these settings in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/index.tsx (2)
571-572: 类型更改方向正确，但建议补齐 Pointer 对称性将 onPopupMouseLeave 的类型从 VoidFunction 调整为 React.MouseEventHandler 是合理的，能直接拿到事件对象进行判断。为保证与已绑定的 onPointerEnter 对称，建议在 Popup 上同时绑定 onPointerLeave（可直接复用同一处理函数），以覆盖仅触发 Pointer 事件的设备场景。
598-607: onMouseEnter 条件可简化：contains(event.target) 在此处恒为真在容器自身的 onMouseEnter 上，event.target 必然是该容器内部节点，因此 popupEle.contains(event.target) 恒为 true，判断多余。可简化以减少误导和冗余逻辑：
- onPopupMouseEnter = (event) => { - // Only trigger re-open when popup is visible or in motion - // and ensure the mouse is entering the popup area - if ( - (mergedOpen || inMotion) && - popupEle?.contains(event.target as HTMLElement) - ) { - triggerOpen(true, mouseEnterDelay); - } - }; + onPopupMouseEnter = (event) => { + // 仅在可见或过渡中才重开，避免 forceRender 等场景误触 + if (mergedOpen || inMotion) { + triggerOpen(true, mouseEnterDelay); + } + };
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #564 +/- ##
=======================================
Coverage 97.75% 97.75%
=======================================
Files 12 12
Lines 801 802 +1
Branches 235 244 +9
=======================================
+ Hits 783 784 +1
Misses 18 18 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a bug in dropdown menu behavior where rapid mouse movement between menu items caused unexpected menu closures. The issue occurred when leaving a submenu would incorrectly trigger the parent menu's onPopupMouseLeave event, causing the parent menu to close unexpectedly.
- Modified
onPopupMouseLeaveto accept a mouse event parameter and validate the event target - Added a condition to only trigger menu closure when the mouse actually leaves the popup element
- Updated function signature to properly handle React mouse events
QdabuliuQ
changed the title
| @@ -576,6 +576,8 @@ export function generateTrigger( | |||
|
|
|||
| if (hoverToShow) { | |||
| const onMouseEnterCallback = (event: React.MouseEvent) => { | |||
| // Clear any delayed close operations | |||
| clearDelay(); | |||
There was a problem hiding this comment.
clearDelay 是对自身的触发进行清理，这个在鼠标事件 trigger open 的时候已经调用了，并不会影响多层的逻辑。应该是通过 parentContext 来告知 parent 需要复活才对。
🤔 This is a ...
🔗 Related Issues
fix ant-design/ant-design#54496
💡 Background and Solution
Quickly moving the mouse in and out of menu items triggers the bug
When the mouse leaves the submenu, it triggers onPopupMouseLeave of the previous parent menu, causing the previous parent menu to close unexpectedly
📝 Change Log
Summary by CodeRabbit