select
select copied to clipboard
feat: support overriding default component behavior for the onBlur event in tags mode
为rc-select组件的标签模式下新增了两个参数:onBlurRemoveSpace和onBlurAddValue,用于覆盖组件内部默认的onBlur事件的行为
- resolve https://github.com/ant-design/ant-design/issues/51149
- resolve https://github.com/react-component/select/issues/1075
- resolve https://github.com/react-component/select/issues/952
Summary by CodeRabbit
Summary by CodeRabbit
- 新功能
- 新增属性
onBlurRemoveSpace和onBlurAddValue,用户可自定义失焦时是否添加value,或是否移除value前后的空格。此改动不会造成breaking change
- 新增属性
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| select | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Nov 2, 2024 4:10pm |
Walkthrough
此次更改对src/Select.tsx中的Select组件进行了重大修改,主要集中在API变更、功能更新和可访问性改进。新增了listHeight、listItemHeight和component等属性,同时移除了多个已弃用的属性。combobox模式的行为也进行了调整,限制了某些功能并增强了可访问性。
Changes
| 文件路径 | 更改摘要 |
|---|---|
| src/Select.tsx | - 新增属性:listHeight、listItemHeight、component。- 移除属性: multiple、tags、combobox、firstActiveValue、dropdownMenuStyle、openClassName。- 更新 backfill属性和combobox模式的功能。- 修改 onChange事件返回类型为OptionData。- 增强可访问性,新增 aria-live="polite"属性。- 更新 onInternalSearch函数以处理搜索文本。 |
| README.md | - 新增属性:onBlurRemoveSpaces(布尔类型,默认值:true)。- 新增属性: onBlurAddValue(布尔类型,默认值:true)。 |
| docs/examples/tags.tsx | - 新增两个示例,分别展示onBlurRemoveSpaces和onBlurAddValue属性的使用。 |
| tests/Tags.test.tsx | - 新增两个测试用例,验证onBlurAddValue和onBlurRemoveSpaces属性的行为。 |
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| 在tags模式中,失焦时不改变用户输入的值(#51149, #1075) | ✅ | |
| 在tags模式中,失焦时不添加tag(#952) | ✅ | |
| 移除onBlur的默认行为,避免不必要的选项添加(#952) | ✅ |
Possibly related PRs
- #1060: README.md中的
onBlurRemoveSpaces和onBlurAddValue属性的更改与Select组件的主要修改直接相关。 - #1072: 对
Selector组件事件处理的更新增强了Select组件的可用性,特别是在combobox模式下。 - #1076:
SingleSelector组件中根元素的添加可能影响Select组件的布局和渲染。 - #1077: 对
OptionList组件可访问性特征的更改与主PR中对combobox模式的可访问性增强直接相关。
Suggested reviewers
- zombieJ
- afc163
兔子欢跳在草地上,
选择组件新变化,
高度和项高都更新,
可访问性更是加分,
让每个用户都能欢,
兔子乐在其中欢! 🐇✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Generate unit testing code for this file.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai generate unit testing code for this file.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and generate unit testing code.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
CodeRabbit Configuration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - Please see the configuration documentation for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 98.24%. Comparing base (
ca86130) to head (5afe84f).
Additional details and impacted files
@@ Coverage Diff @@
## master #1081 +/- ##
=======================================
Coverage 98.24% 98.24%
=======================================
Files 39 39
Lines 1482 1484 +2
Branches 418 442 +24
=======================================
+ Hits 1456 1458 +2
Misses 26 26
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
@zombieJ 大佬帮忙review一下
@afc163 @zombieJ 大佬们有空的时候瞅瞅
这个命名看起来过于业务了,如果我业务里要求 blur 的时候保留后面的空格不保留前面的空格?或者 blur 的时候如果输入内容符合某种规则才添加,不符合就不添加?感觉应该是类似某种 post 事件提供一个 source 告知是来自哪里的,然后用户可以选择如何去处理。