select icon indicating copy to clipboard operation
select copied to clipboard

fix: use only the attributes that are already defined

Open codewizardTM opened this issue 1 month ago • 5 comments

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

codewizardTM avatar Nov 28 '25 02:11 codewizardTM

Someone is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Nov 28 '25 02:11 vercel[bot]

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 only className and style are 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.

gemini-code-assist[bot] avatar Nov 28 '25 02:11 gemini-code-assist[bot]

Walkthrough

SingleContent.tsx 中从 option.data 提取并传播属性的方式进行了更改:引入并使用 pickAttrs 以从 option.data.rest 过滤出仅允许的属性,再与现有的 titleclassNamestyle 合并到 restProps 中,替代此前直接展开所有字段的做法。

Changes

Cohort / File(s) 变更摘要
Props 过滤优化
src/SelectInput/Content/SingleContent.tsx
引入 pickAttrs 并使用它从 option.data.rest 选择有效属性,合并到 restProps(同时保留 titleclassNamestyle)。移除直接展开 option.data 中所有字段到 DOM props 的做法。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 分钟

  • 需要重点检查的点:
    • 确认 pickAttrs 的白名单/筛选规则覆盖了所需的属性且不会遗漏合法用例
    • 检查代码库其他位置是否依赖于此前从 option.data 直接传播出的字段(如 labelvaluekey 等)
    • 验证合并后的 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.

❤️ Share

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

coderabbitai[bot] avatar Nov 28 '25 02:11 coderabbitai[bot]

如果需要用 pickAttrs 过滤,我也可以加上

codewizardTM avatar Nov 28 '25 02:11 codewizardTM

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.

codecov[bot] avatar Nov 28 '25 02:11 codecov[bot]

https://github.com/react-component/select/pull/1189

afc163 avatar Dec 26 '25 15:12 afc163