input icon indicating copy to clipboard operation
input copied to clipboard

fix: autofocus input from dialog no effect

Open Fhasghrge opened this issue 2 years ago • 2 comments

🤔 这个变动的性质是?

  • [ ] 新特性提交
  • [x] 日常 bug 修复
  • [ ] 站点、文档改进
  • [ ] 演示代码改进
  • [ ] 组件样式/交互改进
  • [ ] TypeScript 定义更新
  • [ ] 包体积优化
  • [ ] 性能优化
  • [ ] 功能增强
  • [ ] 国际化改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [ ] 测试用例
  • [ ] 分支合并
  • [ ] 工作流程
  • [ ] 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

  1. 问题: 用dialog包裹的input,input的autofocus是失效的
  2. 解决方案: 进入input组件时判断autofocus,如果是true强制聚焦input

📝 更新日志

语言 更新描述
🇺🇸 英文 autoFocus can be focused by default in the Input component wrapped by Dialog and other similar components
🇨🇳 中文 autoFocus 在Dialog等类似的组件包裹的Input组件中能够默认聚焦

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • [x] 文档已补充或无须补充
  • [x] 代码演示已提供或无须提供
  • [x] TypeScript 定义已补充或无须补充
  • [x] Changelog 已提供或无须提供

🚀 概述

copilot:summary

🔍 实现细节

copilot:walkthrough

Summary by CodeRabbit

  • 新功能

    • 引入了对话框组件的样式,提供更好的布局、外观和动画效果。
    • 新增了一个示例组件,展示了输入框的自动聚焦功能。
  • 文档

    • 新增了“AutoFocus”文档,包含示例代码和导航链接。
  • 依赖更新

    • 在项目中添加了新的依赖项“rc-dialog”。

Fhasghrge avatar Jun 17 '23 09:06 Fhasghrge

Codecov Report

Attention: Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review.

Project coverage is 92.00%. Comparing base (c0dd6ed) to head (6379138). Report is 1 commits behind head on master.

Files with missing lines Patch % Lines
src/Input.tsx 66.66% 1 Missing :warning:
Additional details and impacted files
@@            Coverage Diff             @@
##           master      #43      +/-   ##
==========================================
- Coverage   92.34%   92.00%   -0.35%     
==========================================
  Files           5        5              
  Lines         222      225       +3     
  Branches       79       80       +1     
==========================================
+ Hits          205      207       +2     
- Misses         17       18       +1     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov[bot] avatar Jun 18 '23 05:06 codecov[bot]

Walkthrough

此次更改引入了一个新的对话框组件样式文件 assets/autofocus.less,该文件定义了对话框的布局、外观和动画效果。同时,assets/index.less 文件添加了对新样式文件的导入。文档部分新增了 docs/demo/autofocus.md 文件,提供了对话框的演示文档,并在 docs/examples/autofocus.tsx 中添加了一个新的 React 组件 Demo,展示了如何在输入框和对话框中使用 autoFocus 属性。此外,package.json 文件更新了依赖项,添加了 rc-dialog 作为开发依赖。

Changes

文件路径 更改摘要
assets/autofocus.less 新增对话框组件样式,包括 .rc-dialog 及其嵌套类,定义动画效果和媒体查询。
assets/index.less 添加导入语句 @import './autofocus.less';
docs/demo/autofocus.md 新增文档文件 "AutoFocus",包含导航条目和代码片段引用。
docs/examples/autofocus.tsx 新增 React 组件 Demo,演示 autoFocus 属性在输入框和对话框中的使用。
package.json 添加新依赖 "rc-dialog": "^9.1.0"devDependencies
src/Input.tsx 新增 useEffect 钩子以在 autoFocus 属性为真时触发焦点功能。

Poem

在草地上跳跃的小兔子,
新样式如花开,真美丽。
对话框里聚焦如星,
互动体验更欢喜。
代码中舞动新气息,
让我们一起欢庆这次更新的奇迹! 🐇✨


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 Nov 29 '24 07:11 coderabbitai[bot]