fix: prevent dropdown from closing when mousedown on input in multiple mode#1214
Conversation
|
@QDyanbing is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
Walkthrough在 SelectInput 中新增对事件目标是否位于输入框的检测，拆分并调整防止下拉关闭的判断以区分单选/组合框与多选场景，修改 mousedown 处理以在多选且点击输入框时保持下拉打开；并新增对应的多选交互测试。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Input
participant SelectInput
participant Dropdown
User->>Input: mousedown / click
Input->>SelectInput: 传递事件（包含 target 信息）
alt 点击在输入框上
SelectInput->>Dropdown: 保持打开（阻止关闭的条件触发）
else 点击在输入框外
SelectInput->>Dropdown: 根据原有规则决定是否关闭
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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. Comment |
Summary of ChangesHello @QDyanbing, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request resolves a bug in the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tests/Multiple.test.tsx (1)
716-731: 建议补一个“对照关闭”断言，避免防关闭范围未来被意外放大。当前只验证了 input 内不关闭；可再补一次非 input 区域点击后应关闭，测试约束会更完整。
可选测试补充示例
it('should not close dropdown when mousedown on input in multiple mode (text selection)', () => { const { container } = render( <Select mode="multiple" showSearch options={[{ value: 'light' }]} />, ); const input = container.querySelector('input') as HTMLInputElement; // Open dropdown first toggleOpen(container); expectOpen(container, true); // Start interaction from input (simulate starting text selection / cursor move) fireEvent.mouseDown(input); expectOpen(container, true); + + // Control: clicking non-input area should still close + fireEvent.mouseDown(container.querySelector('.rc-select-selector') as HTMLElement); + expectOpen(container, false); });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tests/Multiple.test.tsx` around lines 716 - 731, The test 'should not close dropdown when mousedown on input in multiple mode (text selection)' only asserts that a mousedown on the input doesn't close the dropdown; add a complementary assertion that a mousedown on a non-input area closes it to prevent accidental widening of the "do not close" scope—after the existing input mouseDown and expectOpen(container, true) steps, simulate a mouseDown on a non-input element (e.g., container or document body) using fireEvent.mouseDown and then call expectOpen(container, false) to verify the dropdown closes; refer to the existing helpers toggleOpen, expectOpen and the input variable used in this test when adding this check.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@tests/Multiple.test.tsx`:
- Around line 716-731: The test 'should not close dropdown when mousedown on
input in multiple mode (text selection)' only asserts that a mousedown on the
input doesn't close the dropdown; add a complementary assertion that a mousedown
on a non-input area closes it to prevent accidental widening of the "do not
close" scope—after the existing input mouseDown and expectOpen(container, true)
steps, simulate a mouseDown on a non-input element (e.g., container or document
body) using fireEvent.mouseDown and then call expectOpen(container, false) to
verify the dropdown closes; refer to the existing helpers toggleOpen, expectOpen
and the input variable used in this test when adding this check.
|
@gemini-code-assist pls help to CR again |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1214 +/- ##
=======================================
Coverage 99.43% 99.43%
=======================================
Files 31 31
Lines 1239 1242 +3
Branches 427 452 +25
=======================================
+ Hits 1232 1235 +3
Misses 7 7 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
🤔 本次改动解决了什么问题？
修复
Select在multiple模式下，当下拉框已打开时，在 input 内部进行鼠标操作（例如选中文字或移动光标），
会错误触发
toggleOpen()，导致下拉框被意外关闭的问题。🔍 复现步骤
Select，设置mode="multiple"且showSearch✅ 修复思路
当满足以下条件时，不再触发
toggleOpen()：multiple模式mousedown事件来源于 input 元素内部该修改使 input 内部交互（如文本选择）不会触发关闭逻辑，
行为与旧版本实现保持一致，同时不影响其他交互场景。
🧪 测试
新增回归测试，确保：
multiple模式下，input 内mousedown不会导致下拉框关闭🔗 相关 Issue
fix ant-design/ant-design#57056
Summary by CodeRabbit
发布说明
Bug 修复
测试