Skip to content

Comments

fix: do not render value in combobox mode with custom input#1213

Merged
zombieJ merged 1 commit intomasterfrom
fix/combobox-no-render-value
Feb 24, 2026
Merged

fix: do not render value in combobox mode with custom input#1213
zombieJ merged 1 commit intomasterfrom
fix/combobox-no-render-value

Conversation

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Feb 24, 2026

fix ant-design/ant-design#56932
fix ant-design/ant-design#56948
close #1211

Summary by CodeRabbit

发布说明

  • 缺陷修复
    • 修复了在组合框模式下使用自定义输入时的值显示问题。当提供自定义输入组件时,值显示区域现在将正确隐藏,以避免重复显示。优化了值渲染逻辑,改进了对不同显示配置的处理。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Feb 24, 2026

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

Project Deployment Actions Updated (UTC)
select Ready Ready Preview, Comment Feb 24, 2026 11:48am

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @zombieJ, 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 resolves a visual bug in the Select component where, in combobox mode, the selected value would incorrectly render alongside a custom input element. The change ensures a cleaner user interface by conditionally suppressing the redundant value display, improving the overall user experience for components using custom inputs.

Highlights

  • Combobox Rendering Fix: Addressed an issue where the selected value was redundantly rendered in combobox mode when a custom input component was provided, leading to visual conflicts.
  • Conditional Value Display: Implemented logic to prevent the display of the selected value (renderValue) in SingleContent.tsx if the Select component is in combobox mode and utilizes a custom input.
  • Test Coverage: Introduced a new test case to specifically verify that the value element is not present in the DOM when a custom input is used in combobox mode, ensuring the fix works as expected.

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

Changelog
  • src/SelectInput/Content/SingleContent.tsx
    • Destructured components from useSelectInputContext to access custom input information.
    • Modified the renderValue logic to conditionally render the value based on whether the component is in combobox mode and uses a custom input.
  • tests/Combobox.test.tsx
    • Added a new test suite to cover the scenario of a Select component in combobox mode with a custom input.
    • Asserted that the .rc-select-content-value and .rc-select-placeholder elements are not rendered, while the custom input correctly displays its value and placeholder.
Activity
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.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 24, 2026

Walkthrough

修改SelectInput组件中SingleContent的值渲染逻辑,在combobox模式下提供自定义输入框时,条件性地禁用值的显示。同时添加测试用例验证此场景下的预期行为。

Changes

Cohort / File(s) Summary
值渲染条件逻辑
src/SelectInput/Content/SingleContent.tsx
在combobox模式提供自定义input时,增加shouldRenderValue条件门控以跳过值的渲染;重构renderValue流程,支持有序的条件判断(无值显示 → 样式化选项 → 标签文本 → 占位符)。
Combobox自定义输入测试
tests/Combobox.test.tsx
添加测试用例验证combobox模式下使用自定义输入框时,值显示元素应为null而输入框正确展示值和占位符。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • meet-student

Poem

🐰 值的显示需谨慎,
Combobox遇自定义输入框,
双重影像不再现,
单一真实显其妙,
测试验证齐完善!✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题"fix: do not render value in combobox mode with custom input"清晰准确地概括了PR的主要修改内容,即在使用自定义输入的combobox模式下不渲染值。
Linked Issues check ✅ Passed PR实现了针对#56932(自定义输入框双层背景问题)、#56948(Input.Search宽度缩小)和#1211(选项样式修复)的修复,通过条件性地禁用combobox模式下自定义输入的值渲染来解决问题。
Out of Scope Changes check ✅ Passed 所有修改都与修复combobox模式自定义输入的值渲染问题直接相关,包括SingleContent.tsx的修改和相应的测试用例,均在PR目标范围内。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/combobox-no-render-value

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.

@codecov
Copy link

codecov bot commented Feb 24, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.43%. Comparing base (ec1ee01) to head (f4c65cd).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #1213   +/-   ##
=======================================
  Coverage   99.43%   99.43%           
=======================================
  Files          31       31           
  Lines        1236     1239    +3     
  Branches      444      449    +5     
=======================================
+ Hits         1229     1232    +3     
  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.

Copy link
Contributor

@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 addresses the issue of duplicate value rendering in combobox mode when a custom input is used. The fix is implemented cleanly by introducing a shouldRenderValue flag in SingleContent.tsx that prevents the value from being rendered separately in this specific scenario. The addition of a new test case in Combobox.test.tsx is excellent, as it thoroughly validates the corrected behavior and ensures there are no regressions. The changes are well-targeted and improve the component's behavior as intended. Great work!

@zombieJ zombieJ merged commit 57b36d2 into master Feb 24, 2026
11 of 12 checks passed
@zombieJ zombieJ deleted the fix/combobox-no-render-value branch February 24, 2026 11:50
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
src/SelectInput/Content/SingleContent.tsx (1)

66-104: 可选:禁用值渲染时同步去掉 content-has-value 类名

当前在自定义 input 且 shouldRenderValue 为 false 时,showHasValueCls 仍可能添加,可能触发与值展示相关的样式残留。可以把该 class 与 shouldRenderValue 绑定。

♻️ 建议修改
-    const showHasValueCls =
-      displayValue &&
-      displayValue.label !== null &&
-      displayValue.label !== undefined &&
-      String(displayValue.label).trim() !== '';
-
-    // Render value
-    // Only render value when not using custom input in combobox mode
-    const shouldRenderValue = !(combobox && components?.input);
+    // Only render value when not using custom input in combobox mode
+    const shouldRenderValue = !(combobox && components?.input);
+    const showHasValueCls =
+      shouldRenderValue &&
+      displayValue &&
+      displayValue.label !== null &&
+      displayValue.label !== undefined &&
+      String(displayValue.label).trim() !== '';
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/SelectInput/Content/SingleContent.tsx` around lines 66 - 104, The class
flag showHasValueCls should not be applied when the value isn't being rendered
(shouldRenderValue is false); update the className construction in the component
(where `${prefixCls}-content` is built) to combine showHasValueCls with
shouldRenderValue (e.g., only include `${prefixCls}-content-has-value` when both
showHasValueCls and shouldRenderValue are true) so that when renderValue is null
you won't leave the stale `content-has-value` class affecting styles; adjust the
logic around showHasValueCls / shouldRenderValue where renderValue is computed
to ensure the class is conditionally added.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/SelectInput/Content/SingleContent.tsx`:
- Around line 66-104: The class flag showHasValueCls should not be applied when
the value isn't being rendered (shouldRenderValue is false); update the
className construction in the component (where `${prefixCls}-content` is built)
to combine showHasValueCls with shouldRenderValue (e.g., only include
`${prefixCls}-content-has-value` when both showHasValueCls and shouldRenderValue
are true) so that when renderValue is null you won't leave the stale
`content-has-value` class affecting styles; adjust the logic around
showHasValueCls / shouldRenderValue where renderValue is computed to ensure the
class is conditionally added.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ec1ee01 and f4c65cd.

📒 Files selected for processing (2)
  • src/SelectInput/Content/SingleContent.tsx
  • tests/Combobox.test.tsx

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.

There is a bug in the AutoComplete + Input.Search in the Ant Design 6.3.0. AutoComplete自定义输入框不符合预期

1 participant