fix: when filterSort function is provided, scroll to first option during searching #1163
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough将 Select 的 filterSort 能力通过上下文传递到 OptionList；在单选且搜索时，若启用 filterSort，打开列表时将活动项固定为第一个选项。补充了 SelectContext 类型。新增示例：使用大规模国家数据集与自定义 sorterBySearchValue 的过滤排序演示。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant S as Select
participant Ctx as SelectContext
participant OL as OptionList
participant L as VirtualList
U->>S: 输入搜索值 / 打开下拉
S->>Ctx: 提供 { value, searchValue, filterSort, ... }
OL->>Ctx: 读取上下文
alt 单选且下拉打开
alt filterSort 已提供 且 searchValue 非空
note over OL,L: 新逻辑：活动项 index = 0
OL->>L: scrollTo(0)
else 默认逻辑
OL->>OL: 计算匹配项 index（前缀/等值）
OL->>L: scrollTo(index)
end
end
U->>S: 选择项
S->>U: 更新值
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @NearImba, 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!
此拉取请求旨在优化 Select 组件的用户交互体验。它解决了在启用自定义 filterSort 排序功能并进行搜索时，选项列表不会自动滚动到第一个匹配结果的问题。通过此项改进，用户在搜索时能够更直观地看到最相关的选项，从而提高操作效率和整体可用性。
Highlights
- Select 组件搜索体验改进: 当 Select 组件配置了 filterSort 属性且用户正在进行搜索时，选项列表现在会自动滚动到第一个匹配项，显著提升了用户查找和选择的便捷性。
- filterSort 属性传递机制完善: filterSort 属性现在通过 SelectContext 在组件树中正确传递，确保了 OptionList 组件能够访问并应用自定义的排序逻辑。
- 新增示例与测试数据: 为了更好地演示此功能，文档中新增了一个包含大量国家数据的 Select 示例，并引入了 sorterBySearchValue 函数，以展示在大数据量下的搜索和排序效果。
Using Gemini Code Assist
The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in pull request comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
| const sorterBySearchValue = (oa, ob, info) => | ||
| info.searchValue | ||
| ? oa.label.toLowerCase().indexOf(info.searchValue) > | ||
| ob.label.toLowerCase().indexOf(info.searchValue) | ||
| ? 1 | ||
| : -1 | ||
| : oa.label.localeCompare(ob.label); |
There was a problem hiding this comment.
sorterBySearchValue 这个排序函数的实现存在一些问题，可能会导致排序结果不符合预期：
info.searchValue没有被转换为小写，如果用户输入大写字母进行搜索，indexOf将无法正确匹配。- 当一个选项不匹配（
indexOf返回 -1）而另一个选项匹配时，排序逻辑会出错，不匹配的项可能会排在匹配项的前面。
建议修改为更健壮的实现方式，处理不匹配的情况，并根据匹配位置进行排序。
const sorterBySearchValue = (oa, ob, info) => {
if (!info.searchValue) {
return oa.label.localeCompare(ob.label);
}
const lowerSearch = info.searchValue.toLowerCase();
const indexA = oa.label.toLowerCase().indexOf(lowerSearch);
const indexB = ob.label.toLowerCase().indexOf(lowerSearch);
if (indexA === indexB) {
return oa.label.localeCompare(ob.label);
}
if (indexA === -1) {
return 1;
}
if (indexB === -1) {
return -1;
}
return indexA - indexB;
};
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/OptionList.tsx (1)
185-185: Effect 依赖缺少 filterSort该 Effect 使用了
filterSort，但未在依赖中声明。运行期切换filterSort时不会更新滚动行为。- }, [open, searchValue]); + }, [open, searchValue, filterSort]);docs/examples/filterSort.tsx (2)
996-1003: 排序比较器不稳定且大小写处理不一致
- 未对
searchValue做小写化，大小写不一致。- 相等时返回
-1，违反比较器契约，可能导致不稳定排序。建议改为：
-const sorterBySearchValue = (oa, ob, info) => - info.searchValue - ? oa.label.toLowerCase().indexOf(info.searchValue) > - ob.label.toLowerCase().indexOf(info.searchValue) - ? 1 - : -1 - : oa.label.localeCompare(ob.label); +const sorterBySearchValue = (oa, ob, info) => { + const s = String(info.searchValue || '').toLowerCase(); + const a = String(oa.label).toLowerCase(); + const b = String(ob.label).toLowerCase(); + if (!s) return a.localeCompare(b); + const ia = a.indexOf(s); + const ib = b.indexOf(s); + if (ia === ib) return a.localeCompare(b); + if (ia === -1) return 1; + if (ib === -1) return -1; + return ia - ib; +};
14-993: 文档示例大体量常量建议外置，减小打包体积将
countries移到独立 JSON 并按需导入，降低示例页初始体积。可按此思路修改（示例）：
-const countries = [ /* ...大数组... */ ].map((item) => { - return { - value: item.id, - label: item.en, - }; -}); +// 顶部新增：import countriesRaw from './countries.json'; +const countries = countriesRaw.map((item) => ({ + value: item.id, + label: item.en, +}));在文件顶部补充：
import countriesRaw from './countries.json';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/examples/filterSort.tsx(2 hunks)src/OptionList.tsx(2 hunks)src/Select.tsx(2 hunks)src/SelectContext.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/SelectContext.ts (1)
src/Select.tsx (1)
SelectProps(122-182)
🔇 Additional comments (6)
src/SelectContext.ts (1)
40-41: 类型透传到 Context，设计合理将
filterSort加入SelectContextProps与后续使用保持一致，无运行时影响。src/OptionList.tsx (2)
65-66: 从 Context 解构 filterSort 合理为后续滚动策略提供条件输入，变更本身安全。
162-169: 我要运行脚本检查代码以验证建议（查找 getEnabledActiveIndex、memoFlattenOptions、filterSort 等）。下面运行的脚本会打印相关文件片段。#!/bin/bash set -euo pipefail echo "PWD: $(pwd)" echo "查找 OptionList.tsx 文件..." rg -n --hidden --no-ignore-vcs "OptionList.tsx" || true echo "查找 getEnabledActiveIndex 的定义或使用..." rg -n --hidden --no-ignore-vcs "getEnabledActiveIndex" -S || true echo "查找 memoFlattenOptions / filterSort / searchValue..." rg -n --hidden --no-ignore-vcs "memoFlattenOptions" -S || true rg -n --hidden --no-ignore-vcs "filterSort" -S || true rg -n --hidden --no-ignore-vcs "searchValue" -S || true # 打印找到的 OptionList.tsx 的相关行（若存在） for f in $(rg --hidden --no-ignore-vcs --files | rg "OptionList.tsx" || true); do echo "=== 文件: $f ===" sed -n '1,320p' "$f" || true echo "--- lines 140-200 ---" sed -n '140,200p' "$f" || true done # 如果未找到上面文件，再尝试在 src/ 中直接打印（兼容不同仓库结构） if [ -f "src/OptionList.tsx" ]; then echo "=== src/OptionList.tsx ===" sed -n '1,320p' src/OptionList.tsx echo "--- lines 140-200 ---" sed -n '140,200p' src/OptionList.tsx fisrc/Select.tsx (2)
676-676: 将 filterSort 放入 Context 值 — 同步到消费者组件与上游搜索配置对齐，便于
OptionList调整行为。
697-697: Memo 依赖包含 filterSort — 正确保证
filterSort变化时 Context 及时重建。docs/examples/filterSort.tsx (1)
1021-1028: 新增大数据示例有助于复现/验证行为示例配置与 PR 目标一致，利于手动验证自动滚动。
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1163 +/- ##
==========================================
- Coverage 98.11% 98.05% -0.07%
==========================================
Files 39 39
Lines 1489 1491 +2
Branches 452 455 +3
==========================================
+ Hits 1461 1462 +1
- Misses 28 29 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
I run |
🤔 这个变动的性质是？
🔗 相关 Issue
fix 54884
💡 需求背景和解决方案
解决方法
Select组件当提供filterSort参数时，搜索时默认定位到第一个元素改动前：
用户需要手动滚到最上面去选取最相关的选项
改动后：
自动滚到最上供用户选择
📝 更新日志
filterSortis provided inSelectcomponent，scroll to first option during searchingSelect组件当提供filterSort参数时，搜索时默认定位到第一个元素Summary by CodeRabbit
新功能
文档