fix(issues): fix textarea always grows

check if the textarea overflows before resizing it
This commit is contained in:
Maximilian Bienhüls 2025-08-27 11:50:36 +02:00
parent 07eea0f484
commit 54a1287441

View File

@ -91,14 +91,41 @@ watch(
{ immediate: true },
);
/**
* Checks if the given HTMLElement overflows
* copied from stackoverflow: https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows
* @param el The HTMLElement to check
*/
function checkOverflow(el: HTMLElement) {
const curOverflow = el.style.overflow;
if (!curOverflow || curOverflow === 'visible') {
el.style.overflow = 'hidden';
}
const isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
function resizeTextarea() {
if (!textareaRef.value || !inputWrapperRef.value) {
if (textareaRef.value === undefined) {
return; // cannot chnge textarea if element is not available
}
if (!multiline) {
return; // textarea wont be displayed if multiline === false
}
if (!checkOverflow(textareaRef.value)) {
return;
}
const scrollHeight = textareaRef.value.scrollHeight + 2;
const textAreaElement = textareaRef.value!;
inputWrapperRef.value.style.height = `${scrollHeight}px`;
const scrollHeight = textAreaElement.scrollHeight + 2;
textAreaElement.style.height = `${scrollHeight}px`;
}
const htmlInputType = computed(() => {