fix: use only the attributes that are already defined
🤔 This is a ...
- [ ] 🆕 New feature
- [x] 🐞 Bug fix
- [ ] 📝 Site / documentation improvement
- [ ] 📽️ Demo improvement
- [ ] 💄 Component style improvement
- [ ] 🤖 TypeScript definition improvement
- [ ] 📦 Bundle size optimization
- [ ] ⚡️ Performance optimization
- [ ] ⭐️ Feature enhancement
- [ ] 🌐 Internationalization
- [ ] 🛠 Refactoring
- [ ] 🎨 Code style optimization
- [ ] ✅ Test Case
- [ ] 🔀 Branch merge
- [ ] ⏩ Workflow
- [ ] ⌨️ Accessibility improvement
- [ ] ❓ Other (about what?)
🔗 Related Issues
https://github.com/ant-design/ant-design/issues/55877
💡 Background and Solution
Irrelevant attributes are also added to the div, causing React to show warnings in development mode, This change only uses already defined attributes; all other attributes are ignored
📝 Change Log
| Language | Changelog |
|---|---|
| 🇺🇸 English | only the attributes defined by Option are used, all other attributes are ignored |
| 🇨🇳 Chinese | 只使用 Option 定义的属性,其他属性忽略 |
Summary by CodeRabbit
-
Bug Fixes
- 优化了选项额外数据的处理:渲染选项内容时仅提取并合并允许的属性,避免将非必要字段传播到组件属性中,确保 title、className、style 等关键属性被正确应用。
✏️ Tip: You can customize this high-level summary in your review settings.
Someone is attempting to deploy a commit to the React Component Team on Vercel.
A member of the Team first needs to authorize it.
Summary of Changes
Hello @codewizardTM, I'm Gemini Code Assist[^1]! 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 a bug in the SingleContent component where extraneous attributes from option.data were being passed to the rendered div element, triggering React warnings. The change refines the attribute handling logic to ensure that only valid and explicitly defined attributes, such as className and style, are applied, thereby eliminating the warnings and improving the component's adherence to React's best practices.
Highlights
- Bug Fix: Resolves an issue where irrelevant attributes were being passed to DOM elements, causing React to display warnings in development mode.
-
Attribute Filtering: The component now explicitly filters attributes from
option.data, ensuring that onlyclassNameandstyleare applied, while all other attributes are ignored. - Code Robustness: Enhances the component's robustness by preventing the unintended propagation of arbitrary attributes, leading to cleaner and more predictable HTML output.
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 :thumbsup: and :thumbsdown: 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.
[^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.
Walkthrough
对 SingleContent.tsx 中从 option.data 提取并传播属性的方式进行了更改:引入并使用 pickAttrs 以从 option.data.rest 过滤出仅允许的属性,再与现有的 title、className、style 合并到 restProps 中,替代此前直接展开所有字段的做法。
Changes
| Cohort / File(s) | 变更摘要 |
|---|---|
Props 过滤优化src/SelectInput/Content/SingleContent.tsx |
引入 pickAttrs 并使用它从 option.data.rest 选择有效属性,合并到 restProps(同时保留 title、className、style)。移除直接展开 option.data 中所有字段到 DOM props 的做法。 |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 分钟
- 需要重点检查的点:
- 确认
pickAttrs的白名单/筛选规则覆盖了所需的属性且不会遗漏合法用例 - 检查代码库其他位置是否依赖于此前从
option.data直接传播出的字段(如label、value、key等) - 验证合并后的
restProps在渲染和交互(事件、样式、无障碍属性)上的行为未被破坏
- 确认
Suggested reviewers
- zombieJ
诗
🐰 小兔梳理字段轻盈步,
只留类名与样式驻足,
其余杂物不入 DOM 舞,
组件清爽心也舒,
欢跃一跃撒花祝。
Pre-merge checks and finishing touches
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | 标题准确总结了主要变更内容:通过pickAttrs过滤来仅使用已定义的属性,避免将无关属性传播到DOM元素上。 |
| 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
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 @coderabbitai help to get the list of available commands and usage tips.
如果需要用 pickAttrs 过滤,我也可以加上
Codecov Report
:white_check_mark: All modified and coverable lines are covered by tests.
:white_check_mark: Project coverage is 99.41%. Comparing base (23fa3da) to head (11ffabe).
:warning: Report is 20 commits behind head on master.
Additional details and impacted files
@@ Coverage Diff @@
## master #1176 +/- ##
=======================================
Coverage 99.41% 99.41%
=======================================
Files 31 31
Lines 1200 1201 +1
Branches 428 428
=======================================
+ Hits 1193 1194 +1
Misses 7 7
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
https://github.com/react-component/select/pull/1189