feat(Tabs): support showSearch in more dropdown#992
Conversation
|
Someone 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 info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Walkthrough新增 Changes搜索下拉支持
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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
docs/examples/search-dropdown.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. 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.
Code Review
This pull request introduces a search feature within the tabs overflow dropdown, allowing users to filter tabs. It includes documentation, styling, a demo, and unit tests. The review feedback highlights three key areas for improvement: first, safely extracting text from tab.label since it can be a React node rather than a plain string; second, resetting the selected key when the active tab is filtered out to prevent selecting hidden tabs; and third, enhancing accessibility by auto-focusing the search input upon opening and supporting the Escape key to close the dropdown.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const filteredTabs = mergedSearchValue | ||
| ? tabs.filter(tab => String(tab.label).toLowerCase().includes(mergedSearchValue.toLowerCase())) | ||
| : tabs; |
There was a problem hiding this comment.
在 rc-tabs 中，tab.label 的类型是 React.ReactNode。如果用户传入了非字符串的 React 节点（例如包含图标或 HTML 标签的 <span>Tab 1</span>），直接使用 String(tab.label) 会得到 "[object Object]"，导致搜索过滤失效，甚至在搜索 "object" 时错误地匹配到所有这类 Tab。
建议实现一个简单的文本提取函数，或者在过滤时安全地处理非字符串类型的 label。
const getLabelText = (node: React.ReactNode): string => {
if (!node) return '';
if (typeof node === 'string' || typeof node === 'number') {
return String(node);
}
if (React.isValidElement(node) && node.props && 'children' in node.props) {
return getLabelText(node.props.children);
}
if (Array.isArray(node)) {
return node.map(getLabelText).join('');
}
return '';
};
const filteredTabs = mergedSearchValue
? tabs.filter(tab => getLabelText(tab.label).toLowerCase().includes(mergedSearchValue.toLowerCase()))
: tabs;
| useEffect(() => { | ||
| if (!open) { | ||
| if (open) { | ||
| // 打开时，默认选中当前 activeKey 对应的 tab | ||
| if (!selectedKey && activeKey) { | ||
| setSelectedKey(activeKey); | ||
| } | ||
| } else { | ||
| setSelectedKey(null); | ||
| if (autoClearSearchValue && controlledSearchValue === undefined) { | ||
| setSearchValue(''); | ||
| } | ||
| } | ||
| }, [open]); | ||
| }, [open, activeKey]); |
There was a problem hiding this comment.
当启用搜索并输入关键字过滤 Tab 时，如果当前选中的 selectedKey 被过滤掉了（不再显示在列表中），按下 Enter 键仍然会触发 onTabClick(selectedKey)，导致选中了一个已被隐藏的 Tab。此外，键盘上下键导航也会从一个不可见的项开始，导致体验不佳。
建议在 filteredTabs 变化时，如果当前的 selectedKey 不在过滤后的可见列表中，自动将 selectedKey 重置为过滤后列表中的第一个有效项。
useEffect(() => {
if (open) {
// 打开时，默认选中当前 activeKey 对应的 tab
if (!selectedKey && activeKey) {
setSelectedKey(activeKey);
}
} else {
setSelectedKey(null);
if (autoClearSearchValue && controlledSearchValue === undefined) {
setSearchValue('');
}
}
}, [open, activeKey]);
useEffect(() => {
if (open && isSearchable) {
const enabledTabs = filteredTabs.filter(tab => !tab.disabled);
if (enabledTabs.length > 0 && !enabledTabs.some(tab => tab.key === selectedKey)) {
setSelectedKey(enabledTabs[0].key);
} else if (enabledTabs.length === 0) {
setSelectedKey(null);
}
}
}, [open, filteredTabs, isSearchable, selectedKey]);
| const searchInput = isSearchable ? ( | ||
| <div className={`${dropdownPrefix}-search`}> | ||
| <input | ||
| type="text" | ||
| placeholder={placeholder} | ||
| value={mergedSearchValue} | ||
| onChange={e => { | ||
| const value = e.target.value; | ||
| setSearchValueFn(value); | ||
| onSearch?.(value); | ||
| }} | ||
| onKeyDown={e => { | ||
| if (e.key === 'ArrowDown') { | ||
| e.preventDefault(); | ||
| selectOffset(1); | ||
| } else if (e.key === 'ArrowUp') { | ||
| e.preventDefault(); | ||
| selectOffset(-1); | ||
| } else if (e.key === 'Enter' && selectedKey) { | ||
| e.preventDefault(); | ||
| onTabClick(selectedKey, e); | ||
| setOpen(false); | ||
| } | ||
| }} | ||
| onClick={e => e.stopPropagation()} | ||
| /> | ||
| </div> | ||
| ) : null; |
There was a problem hiding this comment.
为了提升用户体验和无障碍支持（Accessibility），建议在搜索框中加入以下改进：
- 自动聚焦（Auto-focus）：当下拉菜单打开且启用了搜索时，搜索输入框应该自动获得焦点，方便用户直接开始输入。
- 支持 Esc 键关闭：在输入框中按下
Esc键时，应该能够关闭下拉菜单。
const searchInput = isSearchable ? (
<div className={`${dropdownPrefix}-search`}>
<input
ref={node => {
if (node && open && document.activeElement !== node) {
setTimeout(() => node.focus(), 0);
}
}}
type="text"
placeholder={placeholder}
value={mergedSearchValue}
onChange={e => {
const value = e.target.value;
setSearchValueFn(value);
onSearch?.(value);
}}
onKeyDown={e => {
if (e.key === 'ArrowDown') {
e.preventDefault();
selectOffset(1);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
selectOffset(-1);
} else if (e.key === 'Escape') {
e.preventDefault();
setOpen(false);
} else if (e.key === 'Enter' && selectedKey) {
e.preventDefault();
onTabClick(selectedKey, e);
setOpen(false);
}
}}
onClick={e => e.stopPropagation()}
/>
</div>
) : null;
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #992 +/- ##
==========================================
- Coverage 98.98% 97.58% -1.41%
==========================================
Files 18 18
Lines 787 827 +40
Branches 232 256 +24
==========================================
+ Hits 779 807 +28
- Misses 8 20 +12 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
tests/overflow.test.tsx (1)
675-746: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win建议把回归测试补到关闭清空和键盘导航。
Line 675-746 目前只覆盖了输入渲染、筛选和
onSearch。这次改动里更容易回归的是默认autoClearSearchValue=true的关闭清空，以及ArrowUp/ArrowDown/Enter的键盘选择流程，建议顺手补上这两类断言。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/overflow.test.tsx` around lines 675 - 746, Current tests in overflow.test.tsx only cover rendering, filtering, and onSearch in the search dropdown; add regression coverage for the default autoClearSearchValue=true behavior and the keyboard navigation/selection flow. Extend the existing overflow dropdown tests around getTabs, showSearch, and the rc-tabs-dropdown input to assert that the search value clears appropriately after selection when autoClearSearchValue is enabled. Also add key event coverage for ArrowUp, ArrowDown, and Enter to verify the dropdown item focus and selection path does not regress.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/examples/search-dropdown.tsx`:
- Around line 53-56: Search-dropdown 示例里的 Tabs 被固定为 activeKey="1" 且 onChange
被忽略，导致点击搜索结果切换标签无效；请在 search-dropdown.tsx 中为 Tabs 单独维护一个 activeKey 状态，并在
onChange 里更新它，让受控的 searchValue 与 tab 切换状态分离，保持示例可正常切换。
In `@README.md`:
- Around line 121-132: The new `more` / `MoreProps` API table entries in the
README are written in Chinese while the rest of the document is English; update
these descriptions to English to keep the public documentation language
consistent. Please revise the `MoreProps` section and its nested fields (`icon`,
`showSearch`, `placeholder`, `searchValue`, `onSearch`, `autoClearSearchValue`)
so the wording matches the surrounding README style.
In `@src/TabNavList/OperationNode.tsx`:
- Around line 145-147: `OperationNode` needs to keep `selectedKey` in sync with
the current `filteredTabs` result set. Update the selection logic around
`enabledTabs`, the Enter handler, and the `open`/`filteredTabs` effect so
`selectedKey` is always coerced to a valid key in the visible tabs (prefer
current `activeKey`, otherwise the first enabled tab, otherwise `null`). Also
fix the `findIndex(...) || 0` fallback in `OperationNode` so a missing match
does not preserve an invalid index, preventing keyboard confirm and highlight
from pointing at hidden tabs.
- Around line 80-82: The search filtering in OperationNode should not rely on
String(tab.label), because ReactNode labels can stringify to “[object Object]”
and fail in the “more” search. Update the filtering logic around filteredTabs to
use visible text derived from the tab label, or add a configurable filter text
source, so tabs with element labels still match correctly. Keep the fix
localized to the tab filtering path and preserve the existing Tabs API behavior.
---
Nitpick comments:
In `@tests/overflow.test.tsx`:
- Around line 675-746: Current tests in overflow.test.tsx only cover rendering,
filtering, and onSearch in the search dropdown; add regression coverage for the
default autoClearSearchValue=true behavior and the keyboard navigation/selection
flow. Extend the existing overflow dropdown tests around getTabs, showSearch,
and the rc-tabs-dropdown input to assert that the search value clears
appropriately after selection when autoClearSearchValue is enabled. Also add key
event coverage for ArrowUp, ArrowDown, and Enter to verify the dropdown item
focus and selection path does not regress.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: edab3f81-7197-4ef8-9dd1-712eb57eb981
📒 Files selected for processing (7)
README.mdassets/dropdown.lessdocs/demo/search-dropdown.mddocs/examples/search-dropdown.tsxsrc/TabNavList/OperationNode.tsxsrc/interface.tstests/overflow.test.tsx
| <Tabs | ||
| activeKey="1" | ||
| onChange={() => {}} | ||
| items={items} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
让受控搜索示例保持可切换标签。
Line 54-55 把 Tabs 固定在 activeKey="1" 且忽略 onChange，所以从搜索结果点选其他 tab 时示例不会切换内容。这里演示的是受控 searchValue，不是受控 tab 状态，建议单独维护一个 activeKey。
建议修改
const ControlledDemo = ({ items }: { items: any[] }) => {
+ const [activeKey, setActiveKey] = useState('1');
const [searchValue, setSearchValue] = useState('');
return (
<Tabs
- activeKey="1"
- onChange={() => {}}
+ activeKey={activeKey}
+ onChange={setActiveKey}
items={items}
more={{
showSearch: {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Tabs | |
| activeKey="1" | |
| onChange={() => {}} | |
| items={items} | |
| const ControlledDemo = ({ items }: { items: any[] }) => { | |
| const [activeKey, setActiveKey] = useState('1'); | |
| const [searchValue, setSearchValue] = useState(''); | |
| return ( | |
| <Tabs | |
| activeKey={activeKey} | |
| onChange={setActiveKey} | |
| items={items} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/examples/search-dropdown.tsx` around lines 53 - 56, Search-dropdown 示例里的
Tabs 被固定为 activeKey="1" 且 onChange 被忽略，导致点击搜索结果切换标签无效；请在 search-dropdown.tsx 中为
Tabs 单独维护一个 activeKey 状态，并在 onChange 里更新它，让受控的 searchValue 与 tab
切换状态分离，保持示例可正常切换。
| | more | MoreProps | - | dropdown 配置，透传 `@rc-component/dropdown` 的属性 | | ||
|
|
||
| ### MoreProps | ||
|
|
||
| | name | type | default | description | | ||
| | ---------------------- | --------------------------- | ---------- | ------------------------ | | ||
| | icon | ReactNode | - | 自定义更多按钮图标 | | ||
| | showSearch | boolean \| ShowSearchConfig | - | 是否显示搜索框 | | ||
| | - placeholder | string | `'Search'` | 搜索框占位文字 | | ||
| | - searchValue | string | - | 搜索框的值（受控模式） | | ||
| | - onSearch | (value: string) => void | - | 搜索值变化回调 | | ||
| | - autoClearSearchValue | boolean | `true` | 关闭时是否自动清空搜索值 | |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
README 这里请保持英文文档一致性。
Line 121 到 Line 132 新增的 more / MoreProps 描述切成了中文，但这个 README 其余部分仍是英文。公开文档在 API 表格里突然切换语言会影响 npm / GitHub 读者阅读，建议统一翻成英文后再合入。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` around lines 121 - 132, The new `more` / `MoreProps` API table
entries in the README are written in Chinese while the rest of the document is
English; update these descriptions to English to keep the public documentation
language consistent. Please revise the `MoreProps` section and its nested fields
(`icon`, `showSearch`, `placeholder`, `searchValue`, `onSearch`,
`autoClearSearchValue`) so the wording matches the surrounding README style.
| const filteredTabs = mergedSearchValue | ||
| ? tabs.filter(tab => String(tab.label).toLowerCase().includes(mergedSearchValue.toLowerCase())) | ||
| : tabs; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
不要用 String(tab.label) 作为搜索源。
Line 81 这里把 label 直接转成字符串，遇到 ReactNode 会变成 "[object Object]"。Tabs 的公开用法本身就允许元素标签，README.md Line 63 和 Line 70 也是 <p>...</p>，所以这会让带样式的标签在 “more” 搜索里完全搜不到。这里需要提取可见文本，或者提供可配置的 filter text，而不是依赖 String(...)。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/TabNavList/OperationNode.tsx` around lines 80 - 82, The search filtering
in OperationNode should not rely on String(tab.label), because ReactNode labels
can stringify to “[object Object]” and fail in the “more” search. Update the
filtering logic around filteredTabs to use visible text derived from the tab
label, or add a configurable filter text source, so tabs with element labels
still match correctly. Keep the fix localized to the tab filtering path and
preserve the existing Tabs API behavior.
| // 键盘导航只在过滤后的 tabs 上生效 | ||
| const enabledTabs = filteredTabs.filter(tab => !tab.disabled); | ||
| let selectedIndex = enabledTabs.findIndex(tab => tab.key === selectedKey) || 0; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
过滤结果变化后要同步 selectedKey。
Line 236 会在打开时无条件把 activeKey 设为 selectedKey，但 OperationNode 接到的是隐藏 tab 列表，activeKey 很可能根本不在当前结果集里。之后 Line 213 到 Line 216 的 Enter 分支仍会按这个过期 key 触发 onTabClick，而且 Line 147 的 findIndex(...) || 0 也不会兜底，因为 -1 在 JS 里是真值。结果就是：过滤把当前项排除后，键盘确认和高亮都可能落到一个根本没渲染的项上。建议在 open 或 filteredTabs 变化时，把 selectedKey 收敛到当前结果集里的 activeKey / 第一个未禁用项 / null。
Also applies to: 206-217, 233-245
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/TabNavList/OperationNode.tsx` around lines 145 - 147, `OperationNode`
needs to keep `selectedKey` in sync with the current `filteredTabs` result set.
Update the selection logic around `enabledTabs`, the Enter handler, and the
`open`/`filteredTabs` effect so `selectedKey` is always coerced to a valid key
in the visible tabs (prefer current `activeKey`, otherwise the first enabled
tab, otherwise `null`). Also fix the `findIndex(...) || 0` fallback in
`OperationNode` so a missing match does not preserve an invalid index,
preventing keyboard confirm and highlight from pointing at hidden tabs.
1 participant
概述
为 Tabs 组件的更多下拉菜单添加搜索功能，类似于 Select 组件的 showSearch 特性。
相关 Issue
ant-design/ant-design#30719
改动内容
使用方法
测试结果
全部 76 个测试通过。
Summary by CodeRabbit
icon、开启/关闭、以及自定义占位符、受控搜索值、onSearch回调与自动清空开关。more相关 API 说明与MoreProps字段列表，包括showSearch配置项。