From 9be3668030986ed605462be576ff688229aa2d0c Mon Sep 17 00:00:00 2001
From: Hamza El Aoutar <elaoutarhamza@gmail.com>
Date: Sat, 24 Jul 2021 15:32:40 +0100
Subject: [PATCH] Allow messages scrolling within edit box.

---
 src/components/TextInputFocusable/index.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js
index 1ee3da703a2..70fe18d6400 100755
--- a/src/components/TextInputFocusable/index.js
+++ b/src/components/TextInputFocusable/index.js
@@ -123,6 +123,7 @@ class TextInputFocusable extends React.Component {
         this.dragNDropListener = this.dragNDropListener.bind(this);
         this.handlePaste = this.handlePaste.bind(this);
         this.handlePastedHTML = this.handlePastedHTML.bind(this);
+        this.handleWheel = this.handleWheel.bind(this);
     }
 
     componentDidMount() {
@@ -146,6 +147,7 @@ class TextInputFocusable extends React.Component {
             document.addEventListener('dragleave', this.dragNDropListener);
             document.addEventListener('drop', this.dragNDropListener);
             this.textInput.addEventListener('paste', this.handlePaste);
+            this.textInput.addEventListener('wheel', this.handleWheel);
         }
     }
 
@@ -173,6 +175,7 @@ class TextInputFocusable extends React.Component {
             document.removeEventListener('dragleave', this.dragNDropListener);
             document.removeEventListener('drop', this.dragNDropListener);
             this.textInput.removeEventListener('paste', this.handlePaste);
+            this.textInput.removeEventListener('wheel', this.handleWheel);
         }
     }
 
@@ -322,6 +325,18 @@ class TextInputFocusable extends React.Component {
         }
     }
 
+    /**
+     * Manually scrolls the text input, then prevents the event from being passed up to the parent.
+     * @param {Object} event native Event
+     */
+    handleWheel(event) {
+        if (event.target === document.activeElement) {
+            this.textInput.scrollTop += event.deltaY;
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
     /**
      * Check the current scrollHeight of the textarea (minus any padding) and
      * divide by line height to get the total number of rows for the textarea.