From c4b60463ff72b64a1b914ed52b3603d3c5fffd89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20V=C3=A9lez?= <pablovv2012@gmail.com>
Date: Wed, 14 May 2025 15:30:04 +0200
Subject: [PATCH] MM-63965 - add scroll to advanced text editor (#30983)

* MM-63965 - add scroll to advanced text editor

* show scroll only when content wraps in more than one line

* fix unit test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../__snapshots__/autosize_textarea.test.tsx.snap     |  2 +-
 webapp/channels/src/components/autosize_textarea.tsx  | 11 +++++++++--
 .../widgets/advanced_textbox/advanced_textbox.scss    |  4 ++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
index 6d20a8a716..4329121c33 100644
--- a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
     rows={1}
     style={
       Object {
-        "overflowY": "auto",
+        "overflowY": "hidden",
       }
     }
   />
diff --git a/webapp/channels/src/components/autosize_textarea.tsx b/webapp/channels/src/components/autosize_textarea.tsx
index f7d177222f..0843a8da09 100644
--- a/webapp/channels/src/components/autosize_textarea.tsx
+++ b/webapp/channels/src/components/autosize_textarea.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import type {ChangeEvent, FormEvent, HTMLProps} from 'react';
-import React, {useRef, useEffect, useCallback} from 'react';
+import React, {useRef, useEffect, useCallback, useState} from 'react';
 
 import type {Intersection} from '@mattermost/types/utilities';
 
@@ -43,6 +43,9 @@ const styles = {
         borderColor: 'transparent',
     },
     textArea: {
+        overflowY: 'hidden' as const,
+    },
+    textAreaWithScroll: {
         overflowY: 'auto' as const,
     },
 };
@@ -67,6 +70,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
     const height = useRef(0);
     const textarea = useRef<HTMLTextAreaElement>();
     const referenceRef = useRef<HTMLDivElement>(null);
+    const [showScrollbar, setShowScrollbar] = useState(false);
 
     const recalculateHeight = () => {
         if (!referenceRef.current || !textarea.current) {
@@ -84,6 +88,9 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
 
             height.current = scrollHeight;
 
+            // Only show scrollbar if content height exceeds 44px
+            setShowScrollbar(scrollHeight > 44);
+
             onHeightChange?.(scrollHeight, parseInt(style.maxHeight || '0', 10));
         }
     };
@@ -158,7 +165,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
                 onInput={onInput}
                 value={value}
                 defaultValue={defaultValue}
-                style={styles.textArea}
+                style={showScrollbar ? styles.textAreaWithScroll : styles.textArea}
             />
             <div style={styles.container}>
                 <div
diff --git a/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss b/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss
index fb0f5a101f..45d2e9a330 100644
--- a/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss
+++ b/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss
@@ -76,6 +76,10 @@
         .custom-textarea {
             border: none;
             box-shadow: none;
+
+            &.textbox-preview-area {
+                overflow-y: auto;
+            }
             
             &:focus {
                 box-shadow: none;