Skip to content

Conversation

@afc163
Copy link
Member

@afc163 afc163 commented Dec 24, 2025

close ant-design/ant-design#55877

Summary by CodeRabbit

发布说明

  • 问题修复
    • 修复了选择器组件在选中项显示中不当转发选项额外属性的问题。现在仅转发样式和类名配置,防止不必要的属性泄漏。

✏️ Tip: You can customize this high-level summary in your review settings.

@afc163 afc163 requested a review from zombieJ December 24, 2025 03:49
@vercel
Copy link

vercel bot commented Dec 24, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
select Ready Ready Preview, Comment Dec 24, 2025 3:49am

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 24, 2025

概览

修复了 Select 组件在选项包含非标准属性时产生的 React 警告问题。调整了单项内容组件中 option.data 向 restProps 合并的逻辑,仅提取 className 和 style 属性,防止自定义属性被转发到 DOM 元素。

变更清单

群组 / 文件 变更摘要
SingleContent 核心逻辑
src/SelectInput/Content/SingleContent.tsx
修改 option.data 属性合并策略:由完全解构改为仅提取 className 和 style 通过 Object.assign 合并到 restProps;防止自定义属性(如 xxx)被转发到 DOM 节点;restProps 声明由 let 改为 const
测试覆盖
tests/Select.test.tsx
新增单元测试验证非标准 props 不被转发:选项包含自定义属性时,验证展示元素保留 class、style 和 title,但不包含额外属性

序列图

不适用。本次变更为简单属性合并逻辑调整和对应测试覆盖,无多组件交互流程变化。

代码审查工作量评估

🎯 2 (简单) | ⏱️ ~8 分钟

相关 PR

  • feat: add more semantic structure #1168:两个 PR 都修改了 src/SelectInput/Content/SingleContent.tsx 文件,存在代码层面的关联(该 PR 为容器添加 useBaseProps 的 classNames/styles,而本 PR 调整 option.data 合并逻辑)

建议审查者

  • zombieJ

庆祝诗句

🐰 蹦蹦跳跳来修 bug
自定义属性不再乱飞舞
className 和 style 乖乖坐
React 警告彻底去无踪
Select 组件开心又自在

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The pull request title clearly and accurately describes the main change: preventing extra props from being passed to the selected item display, which directly addresses the reported issue.
Linked Issues check ✅ Passed The code changes successfully prevent custom option properties from being forwarded to DOM elements by only merging className and style, eliminating the React warnings reported in issue #55877.
Out of Scope Changes check ✅ Passed All changes are directly related to the linked issue objective: the production code fix prevents extra props forwarding, and the test validates this behavior without introducing unrelated modifications.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/prevent-extra-props-in-selected-item

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aab0e1a and 45c7fe4.

📒 Files selected for processing (2)
  • src/SelectInput/Content/SingleContent.tsx
  • tests/Select.test.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/SelectInput/Content/SingleContent.tsx (1)
src/utils/commonUtil.ts (1)
  • getTitle (29-40)
🔇 Additional comments (3)
tests/Select.test.tsx (1)

2857-2883: 测试覆盖率良好!

这个测试用例正确验证了修复内容:确保只有标准属性(className、style、title)被传递到选中项显示元素,而额外的自定义属性(如 xxx)不会被转发到 DOM 元素上,从而避免 React 警告。

src/SelectInput/Content/SingleContent.tsx (2)

34-34: 良好的实践!

restProps 声明为 const 是正确的,因为后续只通过 Object.assign 修改对象属性,而不是重新赋值引用。


44-49: 核心修复实现正确!

通过显式地从 option.data 中仅提取 classNamestyle,避免了将其他自定义属性(如 labelvaluexxx 等)传递到 DOM 元素,从而消除了 React 关于未知 DOM 属性的警告。title 通过 getTitle() 单独处理,保持了一致性。


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@gemini-code-assist
Copy link

Summary of Changes

Hello @afc163, 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 addresses an issue where the Select component was inadvertently passing all properties from an option object directly to the underlying DOM element used to display the selected item. The changes refactor the prop handling mechanism to ensure that only valid HTML attributes, such as className, style, and title, are applied, thereby preventing the rendering of unknown or arbitrary attributes. A new test has been introduced to confirm this corrected behavior.

Highlights

  • Prop Filtering: Implemented a fix to prevent unintended, arbitrary props from being passed directly to the DOM element representing a selected item in the Select component.
  • Code Refactoring: Refactored the prop handling logic in SingleContent.tsx to explicitly extract and merge only allowed attributes (like className, style, and title) from option.data, rather than spreading all remaining properties.
  • Test Coverage: Added a new test case to Select.test.tsx to verify that extra, non-standard props are correctly filtered out and do not appear on the rendered selected item's DOM element.

🧠 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.

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

  1. 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.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request effectively resolves an issue where extra props were being passed to the selected item display. The change in SingleContent.tsx is correct and targeted, preventing unintended attributes from being added to the DOM by being more explicit about which props are passed. The new test case in Select.test.tsx is a great addition that verifies the fix and prevents regressions. The changes are high-quality and I have no further suggestions.

@codecov
Copy link

codecov bot commented Dec 24, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.42%. Comparing base (aab0e1a) to head (45c7fe4).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #1189   +/-   ##
=======================================
  Coverage   99.42%   99.42%           
=======================================
  Files          31       31           
  Lines        1216     1216           
  Branches      431      411   -20     
=======================================
  Hits         1209     1209           
  Misses          7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@afc163 afc163 merged commit 821976b into master Dec 24, 2025
12 checks passed
@afc163 afc163 deleted the fix/prevent-extra-props-in-selected-item branch December 24, 2025 03:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug 6.0] Select 组件的 options 选项存在 label/value 等它支持的属性外的其他属性时 React 报警告错误

2 participants