Skip to content

fix(messages): hide pointer-triggered focus ring - #338

Merged
xintaofei merged 2 commits into
xintaofei:mainfrom
youxikexue:fix/conversation-pointer-focus-ring
Jul 23, 2026
Merged

fix(messages): hide pointer-triggered focus ring#338
xintaofei merged 2 commits into
xintaofei:mainfrom
youxikexue:fix/conversation-pointer-focus-ring

Conversation

@youxikexue

Copy link
Copy Markdown
Contributor

问题

在 Windows 桌面版或通过分享链接打开的网页端中,Agent 输出内容后,点击消息文本或正文空白处,整个消息滚动区域会出现焦点边框,边框包含右侧滚动条;点击区域外后消失。

复现步骤:

  1. 打开一个已有 Agent 输出内容的对话;
  2. 点击消息文本或正文空白处,不点击链接、按钮或输入框;
  3. 消息滚动区域四周出现完整焦点边框。

预期行为:鼠标点击正文后不显示键盘焦点提示,但仍可使用方向键、PageUp/PageDown 等按键滚动消息。通过 Tab 键进入消息区域时,应继续显示焦点提示。

原因

VirtualizedMessageThread 为支持键盘滚动,给消息滚动视口设置了 tabIndex=0,并在点击非交互正文时调用 focus();视口同时使用 focus-visible:ring-2 提供键盘焦点提示。

Chromium/WebView 会将鼠标事件中调用的程序化 focus() 判定为 :focus-visible,因此鼠标点击也触发了原本用于键盘导航的焦点环。相关行为由提交 259989f 引入。

方案选择

考虑过以下方式:

  1. 删除焦点环:会同时删除 Tab 导航所需的焦点提示;
  2. 删除 tabIndex 或点击聚焦:会破坏现有键盘滚动;
  3. 仅区分本次焦点是否来自鼠标:保留现有交互,只抑制鼠标点击产生的错误焦点环。

本 PR 采用方案 3,保留原有键盘操作和无障碍设计,只修正不同输入方式下的视觉反馈。

改动

  • 左键点击非交互正文并调用 focus() 前,为消息视口写入临时的鼠标焦点来源标记;
  • 鼠标来源且命中 :focus-visible 时,通过局部样式隐藏焦点环;
  • 视口失焦或组件卸载时清理标记;
  • 保留现有 tabIndex、点击聚焦、交互元素过滤、右键处理和键盘焦点样式。

改动仅涉及 VirtualizedMessageThread 及对应回归测试,不修改全局 ScrollArea 或基础焦点样式。

影响评估

  • 保留 Tab 焦点提示、键盘滚动及链接、按钮、文本选择和右键等原有交互;
  • 改动仅作用于消息视口的临时 DOM 状态和局部样式,不涉及数据、文件保存、后端或其他滚动区域;桌面端和网页端共用该逻辑;
  • 鼠标点击后到视口失焦前,键盘滚动也不显示焦点环;通过键盘重新聚焦后恢复。这是本方案的明确取舍。

验证

  • 4 项定向回归测试、ESLint、完整 Vitest(182 个测试文件、2288 项测试)、Next.js 构建和 git diff --check 均通过;
  • Windows Tauri 开发版已实机验证,原焦点边框问题未再复现;网页端人工验收待记录。

@youxikexue

Copy link
Copy Markdown
Contributor Author

@xintaofei 大佬,还合并pr吗?

@xintaofei
xintaofei merged commit a1e548f into xintaofei:main Jul 23, 2026
7 checks passed
@xintaofei

Copy link
Copy Markdown
Owner

感谢佬的PR

xintaofei added a commit that referenced this pull request Jul 23, 2026
- feat(git-log): **A rebuilt Commit history tab.** Virtualized and paged for long histories, with branch and author filters, a pushed/not-pushed marker on every commit, and your filter choices remembered per folder.
- feat(sidebar): **Group sessions by git worktree.** Turn on "Show worktree folders" to nest each worktree under its repo as a collapsible, branch-labelled sub-group. On by default now, alongside "Show completed."
- feat(delegation): **Mention an agent with `@` to hand it the work.** Naming a sub-agent in your message now delegates that work straight to it — one delegation per agent named.
- feat(chat): **View a diff from a reply's changed files.** Each modified file now has a View Diff button that opens its diff in an editor tab, on web and desktop.
- feat(layout): **Session stats on mobile.** The mobile status bar now shows your session stats on the left.
- fix(chat): **No more phantom tool cards after a turn ends.** Empty tool calls left by interrupted or retried turns no longer resurface and inflate the tool-group and poll cards.
- fix(messages): **The focus ring follows your keyboard, not your mouse.** Clicking a message no longer leaves a focus outline; keyboard navigation still shows one. Thanks to @youxikexue (#338).
- fix(chat): **A tidier connection indicator.** It now aligns with the send button and uses a muted colour when connected instead of a green heart.
- fix(layout): **No stray scrollbar on the branch selector.** The popup now sizes to its rows, so filtered lists have no leftover scrollbar or empty space.
- chore(acp): **Refreshed the bundled agent versions.** Claude Code 0.61.0, Gemini 0.52.0, CodeBuddy 2.126.0, Kimi Code 0.29.0, Grok 0.2.111, and Cursor 2026.07.20.

-----------------------------

# 发布版本 0.21.6

- 功能(提交历史):**重建的「提交」标签。** 虚拟化分页加载,长历史也流畅,支持按分支与作者筛选,每条提交显示是否已推送,筛选选择按文件夹分别记住。
- 功能(侧边栏):**按 git 工作树分组会话。** 打开「显示工作树文件夹」,即可把每个工作树作为可折叠、以分支命名的子分组归到所属仓库下。现与「显示已完成」一并默认开启。
- 功能(委派):**用 `@` 提及某个智能体,即可把工作交给它。** 在消息中点名子智能体,现在会直接把这部分工作委派给它——点名几个就生成几个委派。
- 功能(聊天):**在回复的变更文件上查看 diff。** 每个被修改的文件现在都带「查看 Diff」按钮,点击即在编辑器标签中打开其 diff,网页端与桌面端均可用。
- 功能(布局):**移动端显示会话统计。** 移动端状态栏现在在左侧显示你的会话统计。
- 修复(聊天):**回合结束后不再残留幽灵工具卡片。** 中断或重试回合留下的空工具调用,不再重新出现并撑大工具分组与轮询卡片。
- 修复(消息):**焦点框跟随键盘,而非鼠标。** 点击消息不再留下焦点轮廓,键盘导航时仍会显示。感谢 @youxikexue 的贡献(#338)。
- 修复(聊天):**更整洁的连接指示。** 现在与发送按钮对齐,「已连接」时改用柔和色而非绿色心形。
- 修复(布局):**分支选择器不再出现多余滚动条。** 弹层现在按其行高自适应,筛选后的列表既无残留滚动条也没有空白。
- 维护(智能体):**刷新内置的智能体版本。** Claude Code 0.61.0、Gemini 0.52.0、CodeBuddy 2.126.0、Kimi Code 0.29.0、Grok 0.2.111,以及 Cursor 2026.07.20。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants