From c52916de8e129d22dfdc97cddcfb3f3a581e2ea6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Fri, 19 May 2023 20:42:39 -0400 Subject: [PATCH] fix: text area height calculation in chats --- public/src/client/chats.js | 2 +- public/src/client/chats/messages.js | 13 +++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/public/src/client/chats.js b/public/src/client/chats.js index e21181cdc0..39cf3519c5 100644 --- a/public/src/client/chats.js +++ b/public/src/client/chats.js @@ -200,7 +200,7 @@ define('forum/chats', [ textarea.on('input', function () { const isAtBottom = messages.isAtBottom(parent.find('.chat-content')); textarea.css({ height: 0 }); - textarea.css({ height: textarea.prop('scrollHeight') + 'px' }); + textarea.css({ height: messages.calcAutoTextAreaHeight(textarea) + 'px' }); if (isAtBottom) { messages.scrollToBottom(parent.find('.chat-content')); } diff --git a/public/src/client/chats/messages.js b/public/src/client/chats/messages.js index 6f5dd27a28..ce6f6cb18f 100644 --- a/public/src/client/chats/messages.js +++ b/public/src/client/chats/messages.js @@ -54,16 +54,21 @@ define('forum/chats/messages', [ messages.updateTextAreaHeight = function (chatContentEl) { const textarea = chatContentEl.find('[component="chat/input"]'); + textarea.css({ height: messages.calcAutoTextAreaHeight(textarea) + 'px' }); + }; + + messages.calcAutoTextAreaHeight = function (textarea) { const scrollHeight = textarea.prop('scrollHeight'); - textarea.css({ height: scrollHeight + 'px' }); + const borderTopWidth = parseFloat(textarea.css('border-top-width'), 10) || 0; + const borderBottomWidth = parseFloat(textarea.css('border-bottom-width'), 10) || 0; + return scrollHeight + borderTopWidth + borderBottomWidth; }; function autoresizeTextArea(textarea) { - const scrollHeight = textarea.prop('scrollHeight'); - textarea.css({ height: scrollHeight + 'px' }); + textarea.css({ height: messages.calcAutoTextAreaHeight(textarea) + 'px' }); textarea.on('input', function () { textarea.css({ height: 0 }); - textarea.css({ height: textarea.prop('scrollHeight') + 'px' }); + textarea.css({ height: messages.calcAutoTextAreaHeight(textarea) + 'px' }); }); }