From 2df5ff9d9bf2b404f4922bbf7241b3ffa1d19bf7 Mon Sep 17 00:00:00 2001
From: Rita Anene <92169163+Camillarhi@users.noreply.github.com>
Date: Thu, 25 Jul 2024 10:27:18 +0100
Subject: [PATCH] MM-54561 Enable scrolling and visible scrollbar in post
 textbox (#27369)

* fix: Enable scrolling and visible scrollbar in post textbox

* fix: Enable scrolling and visible scrollbar in post textbox

* fix: removed "display inline-block" styling to enable autosizing while typing

* fix: update reference css properties

* update test snapshot

* fixed lint in file

* fix: modify type casting

* fix: removed unused import

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../__snapshots__/autosize_textarea.test.tsx.snap        | 8 ++++++++
 webapp/channels/src/components/autosize_textarea.tsx     | 9 ++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

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 82497cc1fd..9ba5389643 100644
--- a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
@@ -26,6 +26,11 @@ exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
     id="autosize_textarea"
     role="textbox"
     rows={1}
+    style={
+      Object {
+        "overflowY": "auto",
+      }
+    }
   />
   <div
     style={
@@ -44,7 +49,10 @@ exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
         Object {
           "display": "inline-block",
           "height": "auto",
+          "position": "relative",
+          "transform": "translateY(-100%)",
           "width": "auto",
+          "wordBreak": "break-word",
         }
       }
     />
diff --git a/webapp/channels/src/components/autosize_textarea.tsx b/webapp/channels/src/components/autosize_textarea.tsx
index 91b7619046..58ba8888df 100644
--- a/webapp/channels/src/components/autosize_textarea.tsx
+++ b/webapp/channels/src/components/autosize_textarea.tsx
@@ -25,9 +25,12 @@ const styles = {
         overflow: 'hidden',
     },
     reference: {
-        display: 'inline-block',
         height: 'auto',
         width: 'auto',
+        display: 'inline-block',
+        position: 'relative' as const,
+        transform: 'translateY(-100%)',
+        wordBreak: 'break-word' as const,
     },
     placeholder: {
         overflow: 'hidden',
@@ -39,6 +42,9 @@ const styles = {
         background: 'none',
         borderColor: 'transparent',
     },
+    textArea: {
+        overflowY: 'auto' as const,
+    },
 };
 
 const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
@@ -168,6 +174,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
                 onInput={onInput}
                 value={value}
                 defaultValue={defaultValue}
+                style={styles.textArea}
             />
             <div style={styles.container}>
                 <div