From d2fab26a5dd070282a23bf7ec488148306e62d9c Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 5 Jan 2021 15:21:41 +1100
Subject: [PATCH] ignore arrows events when the textarea is selected

Fixes #1416
---
 .../conversation/SessionCompositionBox.tsx    |  3 ++
 .../conversation/SessionConversation.tsx      | 43 ++++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx
index 6202c3827..c03939d55 100644
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@@ -709,6 +709,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       await this.onSendMessage();
     } else if (event.key === 'Escape' && this.state.showEmojiPanel) {
       this.hideEmojiPanel();
+    } else if (event.key === 'PageUp' || event.key === 'PageDown') {
+      // swallow pageUp events if they occurs on the composition box (it breaks the app layout)
+      event.preventDefault();
     }
   }
 
diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx
index 700151e9e..e3e082497 100644
--- a/ts/components/session/conversation/SessionConversation.tsx
+++ b/ts/components/session/conversation/SessionConversation.tsx
@@ -307,6 +307,7 @@ export class SessionConversation extends React.Component<Props, State> {
           /> */}
 
         <div
+          // if you change the classname, also update it on onKeyDown
           className={classNames(
             'conversation-content',
             selectionMode && 'selection-mode'
@@ -888,26 +889,28 @@ export class SessionConversation extends React.Component<Props, State> {
       }
       // EXIT WHAT ELSE?
     }
-    switch (event.key) {
-      case 'Escape':
-        if (selectionMode) {
-          this.resetSelection();
-        }
-        break;
-      // Scrolling
-      case 'ArrowUp':
-        messageContainer.scrollBy(0, -arrowScrollPx);
-        break;
-      case 'ArrowDown':
-        messageContainer.scrollBy(0, arrowScrollPx);
-        break;
-      case 'PageUp':
-        messageContainer.scrollBy(0, -pageScrollPx);
-        break;
-      case 'PageDown':
-        messageContainer.scrollBy(0, pageScrollPx);
-        break;
-      default:
+    if (event.target.classList.contains('conversation-content')) {
+      switch (event.key) {
+        case 'Escape':
+          if (selectionMode) {
+            this.resetSelection();
+          }
+          break;
+        // Scrolling
+        case 'ArrowUp':
+          messageContainer.scrollBy(0, -arrowScrollPx);
+          break;
+        case 'ArrowDown':
+          messageContainer.scrollBy(0, arrowScrollPx);
+          break;
+        case 'PageUp':
+          messageContainer.scrollBy(0, -pageScrollPx);
+          break;
+        case 'PageDown':
+          messageContainer.scrollBy(0, pageScrollPx);
+          break;
+        default:
+      }
     }
   }