fix: simplify input props handling and improve accessibility features… #1151
Conversation
…react-component#1150) * fix: simplify input props handling and improve accessibility features * chore: add unit test (cherry picked from commit e6a3ca7) # Conflicts: # src/Selector/Input.tsx
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更新重构了 Changes
Sequence Diagram(s)sequenceDiagram
participant Parent as 父组件
participant Input as Input组件
participant composeProps as composeProps工具
participant NativeInput as 原生input元素
Parent->>Input: 传递props（含事件处理函数等）
Input->>composeProps: 合并restProps与originProps
composeProps-->>Input: 返回合并后的props
Input->>NativeInput: 渲染并传递合并后的props
NativeInput-->>Input: 触发事件（如onPaste等）
Input-->>Parent: 调用对应的事件处理函数
Possibly related PRs
Suggested reviewers
Poem
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
src/Selector/Input.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
tests/Select.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1151 +/- ##
==========================================
- Coverage 98.27% 98.24% -0.03%
==========================================
Files 39 39
Lines 1503 1478 -25
Branches 455 449 -6
==========================================
- Hits 1477 1452 -25
Misses 26 26 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/Selector/Input.tsx (1)
50-67:⚠️ Potential issue
maxLength可能破坏受控逻辑，需要显式剔除
restProps当前会把maxLength（以及之前被手动排除的disabled、tabIndex等）直接透传到原生<input>，而组件依旧处于受控模式。maxLength在受控输入上往往失效，且之前专门通过 warning 提示用户不要这么做。建议在合并前把该属性移除以保持旧有行为并避免潜在 bug。- ...composeProps(restProps, originProps, true), + // 移除可能导致受控输入失效的属性（保持与旧实现一致） + const { maxLength: _omitMaxLength, ...safeRest } = restProps; + ...composeProps(safeRest, originProps, true),
🧹 Nitpick comments (1)
src/Selector/Input.tsx (1)
91-95:opacity: null可读性一般，可改为undefined在 React 的内联样式中
null与undefined都会移除属性，但使用undefined更符合常见习惯，也能减少团队成员的认知负担。- opacity: editable ? null : 0, + opacity: editable ? undefined : 0,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/Selector/Input.tsx(4 hunks)tests/Select.test.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
tests/Select.test.tsx (1)
927-977: 新增 paste 测试用例覆盖度提升，赞！针对自定义输入元素的粘贴事件增加了断言，确保事件能够正确透传并更新值，测试用例设计合理。
… (#1150)
fix: simplify input props handling and improve accessibility features
chore: add unit test
(cherry picked from commit e6a3ca7)
Conflicts:
src/Selector/Input.tsx
Summary by CodeRabbit
重构
测试