upstream-archive/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-07-23 09:10:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent scroll jump when editing large messages (#21402)

Browse Source 
Save and restore scroll positions around textarea auto-resize to avoid
layout shifts. Use preventScroll on focus.
This commit is contained in:
Algorithm5838
2026-02-16 10:33:51 +03:00
committed by GitHub
parent ca0983f76b
commit 15b5f97f89
2 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@@ -365,8 +365,13 @@
await tick();
const messagesContainer = document.getElementById('messages-container');
const savedScrollTop = messagesContainer?.scrollTop;
editTextAreaElement.style.height = '';
editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
};
const editMessageConfirmHandler = async () => {
@@ -697,8 +702,13 @@
class=" bg-transparent outline-hidden w-full resize-none"
bind:value={editedContent}
on:input={(e) => {
const messagesContainer = document.getElementById('messages-container');
const savedScrollTop = messagesContainer?.scrollTop;
e.target.style.height = '';
e.target.style.height = `${e.target.scrollHeight}px`;
if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
}}
on:keydown={(e) => {
if (e.key === 'Escape') {

16
src/lib/components/chat/Messages/UserMessage.svelte
View File

@@ -50,6 +50,7 @@
let editedFiles = [];
let messageEditTextAreaElement: HTMLTextAreaElement;
let editScrollContainer: HTMLDivElement;
let message = JSON.parse(JSON.stringify(history.messages[messageId]));
$: if (history.messages) {
@@ -73,10 +74,14 @@
await tick();
if (messageEditTextAreaElement) {
const messagesContainer = document.getElementById('messages-container');
const savedScrollTop = messagesContainer?.scrollTop;
messageEditTextAreaElement.style.height = '';
messageEditTextAreaElement.style.height = `${messageEditTextAreaElement.scrollHeight}px`;
messageEditTextAreaElement?.focus();
if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
messageEditTextAreaElement?.focus({ preventScroll: true });
}
};
@@ -283,15 +288,22 @@
</div>
{/if}
<div class="max-h-96 overflow-auto">
<div class="max-h-96 overflow-auto" bind:this={editScrollContainer}>
<textarea
id="message-edit-{message.id}"
bind:this={messageEditTextAreaElement}
class=" bg-transparent outline-hidden w-full resize-none"
bind:value={editedContent}
on:input={(e) => {
const messagesContainer = document.getElementById('messages-container');
const savedScrollTop = messagesContainer?.scrollTop;
const savedInnerScroll = editScrollContainer?.scrollTop;
e.target.style.height = '';
e.target.style.height = `${e.target.scrollHeight}px`;
if (messagesContainer) messagesContainer.scrollTop = savedScrollTop;
if (editScrollContainer) editScrollContainer.scrollTop = savedInnerScroll;
}}
on:keydown={(e) => {
if (e.key === 'Escape') {