refactor(editor): Refactor height adjustment method to use ref (no-changelog) (#14630)

This commit is contained in:
oleg
2025-04-15 09:46:05 +02:00
committed by GitHub
parent 6dd7756191
commit b60dff807d

View File

@@ -89,7 +89,7 @@ onMounted(() => {
resizeObserver.value = new ResizeObserver((entries) => { resizeObserver.value = new ResizeObserver((entries) => {
for (const entry of entries) { for (const entry of entries) {
if (entry.target === chatTextArea.value) { if (entry.target === chatTextArea.value) {
adjustHeight({ target: chatTextArea.value } as unknown as Event); adjustTextAreaHeight();
} }
} }
}); });
@@ -149,7 +149,7 @@ async function onSubmitKeydown(event: KeyboardEvent) {
} }
await onSubmit(event); await onSubmit(event);
adjustHeight({ target: chatTextArea.value } as unknown as Event); adjustTextAreaHeight();
} }
function onFileRemove(file: File) { function onFileRemove(file: File) {
@@ -181,8 +181,9 @@ function onOpenFileDialog() {
openFileDialog({ accept: unref(allowedFileTypes) }); openFileDialog({ accept: unref(allowedFileTypes) });
} }
function adjustHeight(event: Event) { function adjustTextAreaHeight() {
const textarea = event.target as HTMLTextAreaElement; const textarea = chatTextArea.value;
if (!textarea) return;
// Set to content minimum to get the right scrollHeight // Set to content minimum to get the right scrollHeight
textarea.style.height = 'var(--chat--textarea--height)'; textarea.style.height = 'var(--chat--textarea--height)';
// Get the new height, with a small buffer for padding // Get the new height, with a small buffer for padding
@@ -204,9 +205,9 @@ function adjustHeight(event: Event) {
:disabled="isInputDisabled" :disabled="isInputDisabled"
:placeholder="t(props.placeholder)" :placeholder="t(props.placeholder)"
@keydown.enter="onSubmitKeydown" @keydown.enter="onSubmitKeydown"
@input="adjustHeight" @input="adjustTextAreaHeight"
@mousedown="adjustHeight" @mousedown="adjustTextAreaHeight"
@focus="adjustHeight" @focus="adjustTextAreaHeight"
/> />
<div class="chat-inputs-controls"> <div class="chat-inputs-controls">