fix: spaceKey preventDefault

[QDyanbing]

fix: ant-design/ant-design#56939
isSpaceKey 去除 event.preventDefault()

Summary by CodeRabbit

发布说明

• Bug Fixes

  • 优化选择框的键盘交互：调整 Enter/Space 在输入框内外的默认行为，避免在输入时阻止空格输入，同时在非输入场景改善表单提交和页面滚动体验。

• New Features

  • 新增演示与示例：添加「搜索」演示页面文档及示例组件，展示带搜索能力的选择框用法。

[vercel]

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

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello @QDyanbing, I'm Gemini Code Assist¹! 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!

此拉取请求旨在解决 BaseSelect 组件中空格键行为异常的问题。此前，空格键会不必要地阻止默认事件行为，例如页面滚动。通过调整 event.preventDefault() 的调用逻辑，确保只有在按下回车键时才阻止默认行为，从而使空格键在大多数情况下能正常工作，提升用户体验。

Highlights

• 修复空格键行为: 移除了当 isSpaceKey 为真时对 event.preventDefault() 的调用，解决了空格键在 BaseSelect 组件中不必要的默认行为阻止问题。
• 调整 preventDefault 条件: 将 event.preventDefault() 的触发条件修改为仅在 isEnterKey 为真且 mode 不为 'combobox' 时执行。

🧠 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/BaseSelect/index.tsx
  • 修改了 event.preventDefault() 的调用条件，使其不再受 isSpaceKey 影响。

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]

Walkthrough

修改 BaseSelect 的键盘处理：在 onInternalKeyDown 中，当事件目标为输入元素时，Enter/Space 的 preventDefault 不再被无差别阻止；仅在非 combobox 且不在输入框内时阻止默认行为。还新增了示例文档与演示代码文件。

Changes

Cohort / File(s)	Summary
BaseSelect 键盘处理 src/BaseSelect/index.tsx	调整 Enter/Space 的 preventDefault 条件：在事件目标为输入元素时避免阻止默认行为，保留非 combobox 情况下的原有阻止逻辑。
文档 - Demo 页面 docs/demo/search.md	新增 demo 页面文档页面 front matter，并引用示例代码用于渲染。
示例 - Search 示例组件 docs/examples/search.tsx	新增带搜索能力的 Select 示例组件（默认导出），展示 showSearch 与选项。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: open dropdown on spacekey for keyboard accessibility #1200: 修改 BaseSelect 的 Enter/Space 键处理，与本次对 preventDefault 的调整直接相关。
• fix: The Enter key lock cannot be released correctly when the custom input calls blur() #1113: 涉及键盘处理的改动（Enter/Space 与 onInputBlur/键锁），与本次输入框键处理相关联。
• fix: not prevent when child #1174: 修复了 SelectInput 的事件阻止问题，和本次避免在输入内阻止交互的思路相近。

Suggested reviewers

• yoyo837
• zombieJ

Poem

🐰 我是小兔子在草丛里，
键盘轻敲空格不再迟疑，
搜索框里空格跳舞欢喜，
Enter 仍把门轻轻关起，
Select 世界又回和谐里。

🚥 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	The PR title accurately describes the main fix: preventing default space key behavior is being modified to allow space input in search fields.
Linked Issues check	✅ Passed	The code changes directly address the linked issue #56939 by modifying preventDefault behavior for space key to allow space input in Select search mode.
Out of Scope Changes check	✅ Passed	The PR includes the search demo file and example which support the fix context but the core behavioral fix in BaseSelect addresses the linked issue scope.
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

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

docs/examples/search.tsx (1)

11-13: 可选建议："disabled" Option 命名可能造成混淆。

该 Option 的 value 和 text 均为 "disabled"，但实际并未设置 disabled 属性。作为演示示例，建议使用更明确的名称（如 "jack"），或者如果确实想展示禁用状态，添加 disabled 属性。

♻️ 建议修改

方案一：更换名称

-      <Option value="21" text="disabled">
-        disabled
+      <Option value="21" text="jack">
+        jack
       </Option>

方案二：添加 disabled 属性

-      <Option value="21" text="disabled">
+      <Option value="21" text="disabled" disabled>

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist]

Code Review

The pull request correctly addresses the issue of event.preventDefault() being called for the space key, as described in the linked issue. By modifying the condition to include isEnterKey, the default behavior for the space key is no longer prevented in this specific block, which aligns with the stated goal of the fix.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/BaseSelect/index.tsx (1)

472-482: ⚠️ Potential issue | 🟠 Major

单选模式下 Space 键仍需阻止默认滚动行为

移除 Space 键的 preventDefault 修复允许在搜索模式下输入空格，但造成回归：在单选且无搜索的 Select 上按 Space 会导致页面滚动。

标准 ARIA 行为要求 Space 打开下拉时应防止页面滚动。建议根据是否处于搜索输入状态有条件地调用 preventDefault：

      if (isEnterKey || isSpaceKey) {
        // Do not submit form when type in the input; prevent Space from scrolling page
-       if (isEnterKey && mode !== 'combobox') {
+       if (mode !== 'combobox') {
+         if (isEnterKey) {
+           event.preventDefault();
+         }
+         // Prevent Space from scrolling page when not actively searching
+         if (isSpaceKey && !mergedSearchValue) {
+           event.preventDefault();
+         }
        }