fix: Tabs press Enter/Space on active tab should not trigger onChange #790
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次改动在预提交钩子中增加了 Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as 开发者
participant Git as Git 钩子
participant Lint as lint-staged
Dev->>Git: 执行 git commit
Git->>Lint: 调用 npx lint-staged
Lint-->>Git: 返回 lint 结果
Git-->>Dev: 继续提交（若 lint 校验通过）
sequenceDiagram
participant User as 用户
participant Tabs as Tabs 组件
participant ClickHandler as onTabClick
participant ChangeHandler as onChange
User->>Tabs: 点击或按键选择标签页
Tabs->>ClickHandler: 调用 onTabClick(activeKey) 并记录日志
alt 非键盘触发且标签页变化
Tabs->>ChangeHandler: 触发 onChange (传递新选中 key)
else 若为键盘事件
Note right of Tabs: onChange 不会被调用
end
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (6)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
afc163
force-pushed
the
fix/keyboard-trigger-onChange
branch
from
daa7e48 to
ad3c99b
Compare
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/@types/[email protected], npm/[email protected] |
![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
🧹 Nitpick comments (1)
package.json (1)
90-92: 新增 lint-staged 配置
在 package.json 中添加了 lint-staged 配置，针对所有文件执行prettier --write --ignore-unknown操作。这一配置可以帮助自动格式化代码，但建议检查是否对所有文件执行格式化是合理的。如果项目中存在某些不需要格式化或格式化后可能出问题的文件（比如编译生成文件），可以考虑进一步细化匹配模式。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.husky/pre-commit(1 hunks)docs/examples/basic.tsx(1 hunks)package.json(3 hunks)src/TabNavList/index.tsx(1 hunks)tests/accessibility.test.tsx(1 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
src/TabNavList/index.tsx (1)
docs/examples/mix.tsx (1)
activeKey(20-174)
docs/examples/basic.tsx (1)
docs/examples/animated.tsx (1)
React(14-50)
🔇 Additional comments (12)
.husky/pre-commit (1)
1-1: 预提交钩子添加了 lint-staged 校验添加
npx lint-staged命令确保提交前执行代码校验，有助于维护代码质量。src/TabNavList/index.tsx (1)
378-380: 修复了在激活标签上按Enter/Space键时触发onChange的问题按下Enter/Space键时，现在传递
activeKey代替之前的focusKey给onTabClick函数，确保用户在当前激活的标签上按Enter/Space时不会触发不必要的状态变更。
- 添加了按键事件日志输出
- 修改了传递给
onTabClick的参数这个修改符合PR标题描述的行为修复需求。
tests/accessibility.test.tsx (3)
94-97: 为键盘交互测试添加onChange断言检查添加了
onChange模拟函数并在创建测试组件时传入，这样可以验证修复的有效性。
105-105: 验证Space键不触发onChange确保按下空格键激活标签时不会触发
onChange回调，只会调用onTabClick。
113-113: 验证Enter键不触发onChange确保按下Enter键激活标签时不会触发
onChange回调，只会调用onTabClick。docs/examples/basic.tsx (3)
40-42: 改进了onTabClick回调的日志记录修改了日志输出，从简单的
'key'改为更有描述性的'onTabClick'，便于理解日志输出的来源。
44-46: 添加了onChange回调函数新增了
onChange函数，用于处理标签切换事件，并通过日志输出记录切换的标签key。这与修复内容相关，用于区分点击事件与实际的标签切换事件。
53-53: 为Tabs组件添加onChange属性将新增的
onChange函数传给Tabs组件，完成了对标签切换事件的监听。这个改动与PR的修复目标一致，使组件能够在标签实际变更时触发onChange回调。package.json (4)
71-71: 新增 Husky 依赖
在 devDependencies 中新增了"husky": "^9.1.7"，这为 Git 钩子的设置提供支持。请确保该版本与项目中其它工具的集成没有冲突。
74-74: 新增 lint-staged 依赖
新增了"lint-staged": "^15.5.0"依赖，用于在提交前对暂存文件自动运行代码格式化操作。此改动符合代码质量要求，建议确认版本与项目中其他工具的兼容性。
76-76: 新增 Prettier 依赖
新增了"prettier": "^3.5.3"依赖，与 lint-staged 配置一起用于统一代码风格。请确认 Prettier 的配置文件（如果存在）与项目需求一致。
37-38:❓ Verification inconclusive
新增 prepare 脚本的调整
在 scripts 中新增的"prepare": "husky && dumi setup"脚本用于在提交前设置 Git 钩子和执行 dumi 的初始化工作。请确认这里的husky命令是否满足预期，通常 Husky 的官方推荐是使用"husky install"来初始化 Git 钩子。如果这个命令是经过验证符合项目需求，则此改动是合理的。
请确认 prepare 脚本中 husky 命令的正确性
在 package.json 文件的 scripts 部分新增的
"prepare": "husky && dumi setup"用于在提交前配置 Git 钩子和执行 dumi 初始化。需要注意，Husky 官方推荐的初始化方式通常为
"husky install"。如果当前项目经过验证后确实适用于直接使用husky命令，则该改动无碍；如果验证后存在问题，建议将该命令调整为"husky install && dumi setup"以确保 Git 钩子能正确安装。
- 文件位置：package.json (行 37-38)
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #790 +/- ##
=======================================
Coverage 98.96% 98.96%
=======================================
Files 18 18
Lines 772 773 +1
Branches 227 220 -7
=======================================
+ Hits 764 765 +1
Misses 8 8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Summary by CodeRabbit
新功能
Bug 修复