fix(chat): 折叠态输入框空白区域不应阻挡对聊天内容的点击/滚动`#147
Open
SsparKluo wants to merge 1 commit into
Open
Conversation
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).
Owner
|
这个我要考虑一下,因为我是故意的,不然高度变化容易引起跳变,我后面再看吧 |
lehhair
added a commit
that referenced
this pull request
Jul 21, 2026
…ut dock click-through except capsule
Contributor
Author
现在这个改法应该没有改变容器高度,只是event透传了应该 |
Owner
已经合并到dev了,后面发正式版的时候此pr会被关闭 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
桌面端/移动端的折叠输入框(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-nonemx-auto max-w-3xl(关键修复)+FloatingActions/CollapsedCapsule根 flexpointer-events-autoPresenceItem包装(permission/question 胶囊)、CollapsedCapsuleReply 按钮、ScrollToBottomButton展开态完全不受影响——
max-w-3xl在展开时仍是pointer-events-auto。改动
验证
tsc -b:无类型错误vitest:3 个测试文件、17 个测试全绿(InputBox.test.tsx、InputBoxAttachments.test.tsx、InputToolbar.test.tsx)兼容性
desktopCollapsedInputDock与移动端enableCollapsedInputDock均覆盖compact视图下行为一致FloatingActions周围空白现在也是 click-through(之前因 inner divpointer-events-auto占满)