Skip to content

fix(chat): 折叠态输入框空白区域不应阻挡对聊天内容的点击/滚动`#147

Open
SsparKluo wants to merge 1 commit into
lehhair:mainfrom
SsparKluo:fix/collapsed-input-dock-pointer-events
Open

fix(chat): 折叠态输入框空白区域不应阻挡对聊天内容的点击/滚动`#147
SsparKluo wants to merge 1 commit into
lehhair:mainfrom
SsparKluo:fix/collapsed-input-dock-pointer-events

Conversation

@SsparKluo

Copy link
Copy Markdown
Contributor

问题

桌面端/移动端的折叠输入框(collapsed input dock)使用 min-height: expandedHeight + justify-end 来保持 bottomPadding 在收起/展开切换时稳定,避免虚拟列表 paddingEnd 抖动导致的滚动跳变。这是设计上必需的权衡。

副作用:当输入框折叠时,外层 max-w-3xl 容器的实际高度仍然等于收起前的输入框高度(约 100px+),但可见的 capsule 只有底部约 32-40px。中间约 60-70px 的空白区域:

  • 视觉上不可见(容器背景透明,能看到后方的对话内容)
  • 但继承了父元素的 pointer-events-auto捕获了所有的点击和滚动事件

结果:用户收起输入框后,原本输入框下方的对话内容区域无法滚动、无法选择文字

根因

CSS 的层叠规则——子元素设置 pointer-events: none 是不够的。父元素 pointer-events: auto 仍会在自己的整个边界上捕获事件。

修复方案

分层 pointer-events 方案:

层级 收起时 元素
容器 pointer-events-none mx-auto max-w-3xl(关键修复)+ FloatingActions/CollapsedCapsule 根 flex
交互叶子 pointer-events-auto PresenceItem 包装(permission/question 胶囊)、CollapsedCapsule Reply 按钮、ScrollToBottomButton

展开态完全不受影响——max-w-3xl 在展开时仍是 pointer-events-auto

改动

src/features/chat/InputBox.tsx           |  4 +++-
src/features/chat/input/InputActions.tsx | 10 +++++-----
2 files changed, 8 insertions(+), 6 deletions(-)

验证

  • tsc -b:无类型错误
  • vitest:3 个测试文件、17 个测试全绿(InputBox.test.tsxInputBoxAttachments.test.tsxInputToolbar.test.tsx
  • 手动验证:收起输入框后,原输入框区域的对话内容可正常滚动和选择;capsule 按钮和滚动按钮仍可正常点击

兼容性

  • 桌面端 desktopCollapsedInputDock 与移动端 enableCollapsedInputDock 均覆盖
  • compact 视图下行为一致
  • 不影响任何展开态的现有行为
  • 附带改进:展开态 FloatingActions 周围空白现在也是 click-through(之前因 inner div pointer-events-auto 占满)

The collapsed input dock keeps min-height: expandedHeight on
contentWrapRef to stabilize bottomPadding across collapse/expand,
which left an invisible click-blocking area above the capsule that
blocked scroll/select of chat content behind it.

Switch the max-w-3xl wrapper to pointer-events-none when collapsed
and re-enable pointer-events-auto only on the actual interactive
leaves (capsule buttons, FloatingActions chips, ScrollToBottomButton).
@lehhair

lehhair commented Jul 21, 2026

Copy link
Copy Markdown
Owner

这个我要考虑一下,因为我是故意的,不然高度变化容易引起跳变,我后面再看吧

lehhair added a commit that referenced this pull request Jul 21, 2026
@SsparKluo

Copy link
Copy Markdown
Contributor Author

这个我要考虑一下,因为我是故意的,不然高度变化容易引起跳变,我后面再看吧

现在这个改法应该没有改变容器高度,只是event透传了应该

@lehhair

lehhair commented Jul 21, 2026

Copy link
Copy Markdown
Owner

这个我要考虑一下,因为我是故意的,不然高度变化容易引起跳变,我后面再看吧

现在这个改法应该没有改变容器高度,只是event透传了应该

已经合并到dev了,后面发正式版的时候此pr会被关闭

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