select icon indicating copy to clipboard operation
select copied to clipboard

feat: support overriding default component behavior for the onBlur event in tags mode

Open aojunhao123 opened this issue 1 year ago • 4 comments

为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

  • 新功能
    • 新增属性 onBlurRemoveSpaceonBlurAddValue,用户可自定义失焦时是否添加value,或是否移除value前后的空格。此改动不会造成breaking change

aojunhao123 avatar Oct 20 '24 13:10 aojunhao123

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

vercel[bot] avatar Oct 20 '24 13:10 vercel[bot]

Walkthrough

此次更改对src/Select.tsx中的Select组件进行了重大修改,主要集中在API变更、功能更新和可访问性改进。新增了listHeightlistItemHeightcomponent等属性,同时移除了多个已弃用的属性。combobox模式的行为也进行了调整,限制了某些功能并增强了可访问性。

Changes

文件路径 更改摘要
src/Select.tsx - 新增属性:listHeightlistItemHeightcomponent
- 移除属性:multipletagscomboboxfirstActiveValuedropdownMenuStyleopenClassName
- 更新backfill属性和combobox模式的功能。
- 修改onChange事件返回类型为OptionData
- 增强可访问性,新增aria-live="polite"属性。
- 更新onInternalSearch函数以处理搜索文本。
README.md - 新增属性:onBlurRemoveSpaces(布尔类型,默认值:true)。
- 新增属性:onBlurAddValue(布尔类型,默认值:true)。
docs/examples/tags.tsx - 新增两个示例,分别展示onBlurRemoveSpacesonBlurAddValue属性的使用。
tests/Tags.test.tsx - 新增两个测试用例,验证onBlurAddValueonBlurRemoveSpaces属性的行为。

Assessment against linked issues

Objective Addressed Explanation
在tags模式中,失焦时不改变用户输入的值(#51149, #1075)
在tags模式中,失焦时不添加tag(#952)
移除onBlur的默认行为,避免不必要的选项添加(#952)

Possibly related PRs

  • #1060: README.md中的onBlurRemoveSpacesonBlurAddValue属性的更改与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?

❤️ Share
🪧 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 @coderabbitai in 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 @coderabbitai in 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 pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file 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.

coderabbitai[bot] avatar Oct 20 '24 13:10 coderabbitai[bot]

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.

codecov[bot] avatar Oct 21 '24 01:10 codecov[bot]

@zombieJ 大佬帮忙review一下

aojunhao123 avatar Oct 26 '24 06:10 aojunhao123

@afc163 @zombieJ 大佬们有空的时候瞅瞅

aojunhao123 avatar Nov 02 '24 16:11 aojunhao123

这个命名看起来过于业务了,如果我业务里要求 blur 的时候保留后面的空格不保留前面的空格?或者 blur 的时候如果输入内容符合某种规则才添加,不符合就不添加?感觉应该是类似某种 post 事件提供一个 source 告知是来自哪里的,然后用户可以选择如何去处理。

zombieJ avatar Nov 04 '24 07:11 zombieJ