fix: onSearch be call onBlur #1085
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
tests/Blur.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
## Walkthrough
该拉取请求对 `BaseSelect` 组件进行了更新，主要改进了下拉菜单的可见性和搜索功能的逻辑。具体来说，`onInternalSearch` 函数增加了条件判断，以确保在关闭下拉菜单时，只有在模式不为 'combobox'、'multiple' 或 'tags' 时才重置搜索值。此外，`onInternalKeyDown` 函数被修改，以防止在按下 Enter 键时提交表单，前提是模式不是 'combobox'。这些更改旨在提升搜索输入和下拉菜单的交互逻辑。
## Changes
| 文件路径 | 更改摘要 |
|-----------------------------|---------------------------------------------------------------------------------------|
| src/BaseSelect/index.tsx | 更新了 `BaseSelect` 组件的下拉菜单可见性和搜索功能逻辑，修改了 `onInternalSearch` 和 `onInternalKeyDown` 函数。 |
| tests/Select.test.tsx | 修改了测试用例以确保搜索输入和下拉项之间的交互正确，更新了快照测试。 |
| tests/Blur.test.tsx | 新增了 `Blur.test.tsx` 测试文件，验证 `Select` 组件在失去焦点时的行为。 |
| tests/shared/inputFilterTest.tsx | 修改了 `inputFilterTest` 中的测试逻辑，以根据模式更新输入值的期望。 |
## Assessment against linked issues
| Objective | Addressed | Explanation |
|---------------------------------------------------------------------------|-----------|------------------------------|
| 当mode为multiple时，失去焦点后不再请求sug接口 | ✅ | |
## Possibly related PRs
- **#1060**: 涉及 `BaseSelect` 组件的下拉菜单可见性和搜索功能的更改，可能与 `Select` 组件的文档和属性更新相关。
- **#1068**: 对 `Select` 组件排序功能的修改可能影响选项的显示和交互，相关于下拉菜单可见性和搜索逻辑的增强。
- **#1072**: `Selector` 组件中 `onInternalInputKeyDown` 事件处理程序的更改可能与下拉菜单可见性和键盘交互相关。
- **#1077**: `OptionList` 组件的可访问性特性和选择逻辑的更新可能与下拉菜单可见性和搜索功能的改进相关。
- **#1078**: `OptionList` 组件中键盘导航能力的增强与主要拉取请求的下拉交互改进相一致。
- **#1090**: `Select` 组件中 `onChange` 回调类型定义的更改可能与下拉菜单的交互逻辑相关。
- **#1092**: 修复 Edge 浏览器中键触发问题的更改可能与下拉菜单可见性和键盘交互的改进相关。
## Suggested reviewers
- afc163
> 兔子欢快地跳跃，
> 下拉菜单更灵活，
> 搜索功能更智能，
> 用户体验真美好！
> 让我们一起欢庆，
> 代码更新真精彩！ 🐇✨📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
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: 2
🧹 Outside diff range and nitpick comments (1)
tests/BaseSelect.test.tsx (1)
128-149: 建议完善测试用例的覆盖范围当前测试用例存在以下需要改进的地方：
- 测试名称应该反映
showSearch={true}的设置- 缺少对初始
searchValue="1"的验证- 建议添加
showSearch={false}的场景测试建议修改如下：
- it('mode with null, onContainerBlur params is blur', () => { + it('mode为null且showSearch为true时，onContainerBlur触发onSearch', () => { const onSearch = jest.fn(); const { container } = render( // ... existing code ... ); + // 验证初始值 + expect(container.querySelector('input').value).toBe('1'); // ... remaining code ... }); + it('mode为null且showSearch为false时，onContainerBlur不触发onSearch', () => { + // 添加showSearch=false的测试用例 + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/BaseSelect/index.tsx(1 hunks)tests/BaseSelect.test.tsx(1 hunks)tests/Select.test.tsx(1 hunks)
🔇 Additional comments (3)
tests/BaseSelect.test.tsx (2)
127-127: 测试结构清晰明确！
测试套件的命名准确反映了其测试目的，结构符合最佳实践。
127-174: 建议增加测试用例以确保完整的行为覆盖
当前的测试用例集没有完全覆盖PR的目标场景。为确保修复的完整性，建议添加以下测试场景：
- 单选模式下的行为测试，以便与多选模式进行对比
- 验证重新获得焦点时是否会触发新的搜索请求
- 测试空值和特殊字符的搜索行为
src/BaseSelect/index.tsx (1)
438-438: 搜索事件源的逻辑修改看起来符合预期
这个改动通过在 mergedShowSearch 为 true 时将搜索事件源从 'typing' 或 'effect' 更改为 'blur'，解决了重新获得焦点时不必要的建议请求问题。这与 PR 的目标一致。
运行以下脚本验证此更改是否正确处理了所有搜索事件源：
✅ Verification successful
Let me gather more context about the search event handling to ensure a comprehensive verification.
Let me try one more verification to check the component's search-related logic:
让我检查一下相关的测试文件以确保这个改动的行为是否符合预期：
搜索事件源的修改已得到验证，实现符合预期
根据代码分析和测试用例验证，这个改动是正确的：
- 在输入时触发
source: 'typing' - 在失焦时触发
source: 'blur' - 在其他情况下触发
source: 'effect'或source: 'submit'
这个修改完全符合 PR 的目标，能够正确处理重新获得焦点时的搜索行为，避免不必要的建议请求。测试用例也验证了这些行为。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查代码库中是否存在其他使用 onSearch 的地方
ast-grep --pattern 'onSearch($_, { source: $_ })'
Length of output: 571
Script:
#!/bin/bash
# 检查 onSearch 的定义和类型
ast-grep --pattern 'onSearch?: $_'
# 检查相关的测试用例
rg "onSearch.*source" -A 3 -B 3 "test|spec|__tests__"
Length of output: 152
Script:
#!/bin/bash
# 检查组件中与搜索相关的状态和处理逻辑
rg "onSearch|showSearch|searchValue" -A 2 -B 2 src/BaseSelect/index.tsx
# 查找测试文件
fd "test|spec" -e tsx -e ts
Length of output: 3571
Script:
#!/bin/bash
# 检查测试文件中与搜索事件源相关的测试用例
rg "onSearch.*source|showSearch.*blur" -A 3 -B 3 tests/
# 特别关注与 blur 事件相关的测试
rg "test.*blur" -A 5 -B 2 tests/
Length of output: 1397
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1085 +/- ##
=======================================
Coverage 98.31% 98.31%
=======================================
Files 39 39
Lines 1487 1487
Branches 443 443
=======================================
Hits 1462 1462
Misses 25 25 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
tests/Blur.test.tsx (1)
7-9: 建议优化模拟组件的实现当前的
OptionList模拟实现过于简单，建议添加必要的 props 类型检查和基本交互功能，以便更好地模拟真实场景。const OptionList = forwardRef<RefOptionListProps, OptionListProps>(() => ( - <div className="popup">Popup</div> + <div className="popup" role="listbox"> + <div role="option">Option 1</div> + <div role="option">Option 2</div> + </div> ));
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/BaseSelect/index.tsx(2 hunks)tests/Blur.test.tsx(1 hunks)tests/Select.test.tsx(1 hunks)tests/shared/inputFilterTest.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/BaseSelect/index.tsx
- tests/Select.test.tsx
🔇 Additional comments (3)
tests/shared/inputFilterTest.tsx (1)
25-26: 测试用例逻辑优化得当！
通过引入 isMultiple 变量来同时处理 'multiple' 和 'tags' 模式的测试场景，使测试用例更加完整和准确。这个改动与 PR 的目标保持一致，有效验证了不同模式下的搜索行为。
tests/Blur.test.tsx (2)
11-32: 测试结构设计合理！
该测试文件很好地验证了 Select 组件在失焦时的搜索行为，特别是对于默认模式下的情况。测试用例清晰地验证了 onSearch 在输入和失焦时的不同行为。
80-102: 测试用例完整性良好！
该测试用例很好地验证了点击选项后的失焦行为，确保了：
- 下拉框正确隐藏
onSearch只被调用一次onBlur事件被正确触发
这与 PR 的目标完全一致，有效验证了修复后的行为。
fix ant-design/ant-design#50642
Summary by CodeRabbit