fix: Text area only shows the last line of the message for very long …

…texts #31252 #31257 (#31262)
RocketChat · Jan 2, 2024 · 92a8de7 · 92a8de7
1 parent 9d6cf47
commit 92a8de7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/apps/meteor/client/views/room/composer/RoomComposer/hooks/useAutoGrow.ts b/apps/meteor/client/views/room/composer/RoomComposer/hooks/useAutoGrow.ts
@@ -14,7 +14,7 @@ const shadowStyleBase: CSSProperties = {
 
 export const useAutoGrow = (
 	ref: RefObject<HTMLTextAreaElement>,
-	shadowRef: RefObject<HTMLTextAreaElement>,
+	shadowRef: RefObject<HTMLDivElement>,
 	hideTextArea?: boolean,
 ): {
 	textAreaStyle: CSSProperties;
@@ -37,8 +37,7 @@ export const useAutoGrow = (
 		if (!textarea) {
 			return;
 		}
-
-		const handleInput = () => {
+		const updateTextareaSize = () => {
 			const { value } = textarea;
 			const { current: shadow } = shadowRef;
 			if (!shadow) {
@@ -51,10 +50,10 @@ export const useAutoGrow = (
 				.replace(/\n$/, '<br/>&nbsp;')
 				.replace(/\n/g, '<br/>');
 		};
-
-		textarea.addEventListener('input', handleInput);
+		updateTextareaSize();
+		textarea.addEventListener('input', updateTextareaSize);
 		return () => {
-			textarea.removeEventListener('input', handleInput);
+			textarea.removeEventListener('input', updateTextareaSize);
 		};
 	}, [ref, shadowRef]);
 

diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -126,7 +126,7 @@ const MessageBox = ({
 
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const messageComposerRef = useRef<HTMLElement>(null);
-	const shadowRef = useRef(null);
+	const shadowRef = useRef<HTMLDivElement>(null);
 
 	const storageID = `messagebox_${room._id}${tmid ? `-${tmid}` : ''}`;