Skip to content

fix: render select input as text combobox#1222

Merged
afc163 merged 2 commits into
react-component:masterfrom
QDyanbing:fix-select-input-type-text
Jun 13, 2026
Merged

fix: render select input as text combobox#1222
afc163 merged 2 commits into
react-component:masterfrom
QDyanbing:fix-select-input-type-text

Conversation

@QDyanbing

@QDyanbing QDyanbing commented May 10, 2026

Copy link
Copy Markdown
Contributor

What changed

  • Render the internal Select input as type="text" instead of type="search" so it can validly carry role="combobox".
  • Default the internal input autocomplete value to new-password to preserve the Chromium autocomplete workaround that originally motivated type="search".
  • Update accessibility coverage and snapshots for the new markup.

Why

input type="search" without a native list attribute has an implicit searchbox role in ARIA in HTML, so overriding it with role="combobox" creates invalid markup. A text input allows the combobox role while autocomplete="new-password" keeps browser autocomplete suppressed.

Fixes ant-design/ant-design#57904.

Validation

  • npx rc-test --updateSnapshot --runInBand
  • npm run tsc

Summary by CodeRabbit

变更说明

  • Bug 修复
    • 统一将 Select 搜索输入类型为文本(text),并通过设置 autocomplete="new-password" 减少浏览器自动填充干扰,提升输入一致性与可用性。
  • 测试
    • 更新相关无障碍与行为测试以覆盖上述输入类型及自动填充行为变化。

@vercel

vercel Bot commented May 10, 2026

Copy link
Copy Markdown

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

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented May 10, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e60c4dfc-013a-4afb-bcf6-be7a7c5d57e6

📥 Commits

Reviewing files that changed from the base of the PR and between 6b3050f and ea7d2cf.

📒 Files selected for processing (3)
  • src/SelectInput/Input.tsx
  • tests/Accessibility.test.tsx
  • tests/Select.test.tsx
✅ Files skipped from review due to trivial changes (1)
  • tests/Accessibility.test.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
  • tests/Select.test.tsx
  • src/SelectInput/Input.tsx

Walkthrough

将 SelectInput 的内部输入 type 固定为 "text",默认 autocomplete 改为 "new-password",并更新相关测试以断言这些属性(包括不存在 list 属性)。

变更内容

ARIA 合规性修复

Layer / File(s) Summary
输入实现修改
src/SelectInput/Input.tsx
将共享输入属性中的 type 固定为 'text',并将缺省 autoComplete'off' 改为 'new-password'
可访问性测试
tests/Accessibility.test.tsx
在默认 ARIA 测试中添加断言,验证内部 inputtype"text" 且不存在 list 属性。
Select 测试
tests/Select.test.tsx
替换搜索输入类型测试:在 showSearch 且下拉打开时断言输入为 type="text"autocomplete="new-password"

预期代码审查工作量

🎯 2 (Simple) | ⏱️ ~10 分钟

可能相关的 PR

建议审查者

  • afc163
  • zombieJ

庆祝之诗 🐰

小兔嗅春风,键盘上跳跃行,
type 改成 text,ARIA 安心宁,
autocomplete 新密钥,浏览器少干扰,
测试点点绿勾勾,合规路上笑开怀。 ✨

🚥 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 PR 标题清晰准确地描述了主要变更:将 Select 输入框从 type="search" 改为 type="text",以修复 ARIA-in-HTML 合规性。
Linked Issues check ✅ Passed 所有代码变更均完全满足 issue #57904 的要求:将内部输入框类型从 type="search" 改为 type="text",保持 role="combobox" 有效,并通过 autocomplete="new-password" 保留浏览器自动填充抑制。
Out of Scope Changes check ✅ Passed 所有变更均在 issue #57904 的范围内:Input.tsx 修改、测试用例更新、快照更新都直接支持 ARIA 合规性修复。
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 unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.


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

codecov Bot commented May 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.44%. Comparing base (4e4700c) to head (ea7d2cf).

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1222      +/-   ##
==========================================
- Coverage   99.44%   99.44%   -0.01%     
==========================================
  Files          31       31              
  Lines        1266     1265       -1     
  Branches      442      461      +19     
==========================================
- Hits         1259     1258       -1     
  Misses          7        7              

☔ View full report in Codecov by Harness.
📢 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.

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

Copy link
Copy Markdown
Contributor

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 updates the Select component's input element by changing its type from search to text and its default autoComplete value from off to new-password. These changes are reflected across the component's implementation, accessibility tests, and various snapshots to ensure consistent behavior and prevent browser-level autocomplete interference. I have no feedback to provide as there were no review comments.

@QDyanbing QDyanbing marked this pull request as ready for review May 10, 2026 07:54

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

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

Inline comments:
In `@src/SelectInput/Input.tsx`:
- Line 174: The autoComplete fallback uses logical OR which treats an explicit
empty string as falsy; update the assignment in Input.tsx (the autoComplete
property where it currently reads autoComplete: autoComplete || 'new-password')
to use the nullish coalescing operator so that only null or undefined trigger
the default (i.e., replace the `||` fallback with `??` for the autoComplete
property in the SelectInput/Input component).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 694f759d-0632-42e2-a47c-d07d9e0fdaf2

📥 Commits

Reviewing files that changed from the base of the PR and between 740b93b and 6b3050f.

⛔ Files ignored due to path filters (4)
  • tests/__snapshots__/Combobox.test.tsx.snap is excluded by !**/*.snap
  • tests/__snapshots__/Select.test.tsx.snap is excluded by !**/*.snap
  • tests/__snapshots__/Tags.test.tsx.snap is excluded by !**/*.snap
  • tests/__snapshots__/ssr.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (3)
  • src/SelectInput/Input.tsx
  • tests/Accessibility.test.tsx
  • tests/Select.test.tsx

Comment thread src/SelectInput/Input.tsx
} as React.CSSProperties,
autoFocus,
autoComplete: autoComplete || 'off',
autoComplete: autoComplete || 'new-password',

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

避免用 || 覆盖显式空字符串的 autoComplete

Line 174 建议改为 ??。当前写法会把调用方传入的 "" 覆盖为 'new-password',行为不够精确。

🔧 建议修改
-    autoComplete: autoComplete || 'new-password',
+    autoComplete: autoComplete ?? 'new-password',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
autoComplete: autoComplete || 'new-password',
autoComplete: autoComplete ?? 'new-password',
🤖 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 `@src/SelectInput/Input.tsx` at line 174, The autoComplete fallback uses
logical OR which treats an explicit empty string as falsy; update the assignment
in Input.tsx (the autoComplete property where it currently reads autoComplete:
autoComplete || 'new-password') to use the nullish coalescing operator so that
only null or undefined trigger the default (i.e., replace the `||` fallback with
`??` for the autoComplete property in the SelectInput/Input component).

@afc163 afc163 merged commit 1169cb8 into react-component:master Jun 13, 2026
9 of 10 checks passed
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.

Select renders invalid ARIA-in-HTML markup: input type="search" with role="combobox" and no list

2 participants