fix(Suggestion): support maxHeight and overflow-y auto for popup scroll - #1983
Conversation
Issue: ant-design#1953 - Add maxHeight: 256px and overflowY: auto to cascader-menu in style - Add scroll demo with 25+ items - Add test for 20+ items scroll scenario
📝 WalkthroughWalkthroughSuggestion 级联菜单新增最大高度和垂直滚动样式，并添加包含 25 条建议项的滚动演示及对应测试。 ChangesSuggestion 滚动支持
Estimated code review effort: 2 (Simple) | ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 scroll support for the Suggestion component when options exceed the maximum height. It updates the cascader menu styles to include a maximum height of 256px and vertical scrolling. Additionally, a new demo and a corresponding unit test have been added to demonstrate and verify this scrolling behavior with 25 items. There are no review comments, so I have no additional feedback to provide.
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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/x/components/suggestion/style/index.ts (1)
17-18: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value考虑使用设计 Token 替代硬编码尺寸
为了更好地适配未来的自定义主题，建议考虑使用设计 Token（例如
token.controlHeight * 8等）来替代硬编码的256px像素值。🤖 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 `@packages/x/components/suggestion/style/index.ts` around lines 17 - 18, Update the maxHeight value in the suggestion component style to use the theme design token, such as token.controlHeight multiplied by the required scale, instead of the hardcoded 256px value; keep overflowY unchanged.
🤖 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.
Nitpick comments:
In `@packages/x/components/suggestion/style/index.ts`:
- Around line 17-18: Update the maxHeight value in the suggestion component
style to use the theme design token, such as token.controlHeight multiplied by
the required scale, instead of the hardcoded 256px value; keep overflowY
unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: aa2ab201-eec4-4482-b97b-32f45c608fe3
📒 Files selected for processing (4)
packages/x/components/suggestion/__tests__/index.test.tsxpackages/x/components/suggestion/demo/scroll.mdpackages/x/components/suggestion/demo/scroll.tsxpackages/x/components/suggestion/style/index.ts
Bundle ReportChanges will decrease total bundle size by 241.25kB (-6.49%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: x-markdown-array-pushAssets Changed:
view changes for bundle: antdx-array-pushAssets Changed:
|
2 participants
📋 Description
Fix #1953
Suggestion 选项过多时弹层无限撑高，且底部会被 Sender 遮挡。新增
maxHeight能力，超出后overflow-y: auto。🔗 Related Issues
📝 Changes
style/index.ts: cascader-menu 添加maxHeight: 256px+overflowY: autodemo/scroll.tsx+demo/scroll.md: 新增 25+ 选项滚动 demo__tests__/index.test.tsx: 新增 20+ 选项滚动测试✅ Checklist
Summary by CodeRabbit
新功能
测试
文档