ignore arrows events when the textarea is selected

Fixes #1416

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();
     }
   }
 

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) {
+    if (event.target.classList.contains('conversation-content')) {
-      case 'Escape':
+      switch (event.key) {
-        if (selectionMode) {
+        case 'Escape':
-          this.resetSelection();
+          if (selectionMode) {
-        }
+            this.resetSelection();
-        break;
+          }
-      // Scrolling
+          break;
-      case 'ArrowUp':
+        // Scrolling
-        messageContainer.scrollBy(0, -arrowScrollPx);
+        case 'ArrowUp':
-        break;
+          messageContainer.scrollBy(0, -arrowScrollPx);
-      case 'ArrowDown':
+          break;
-        messageContainer.scrollBy(0, arrowScrollPx);
+        case 'ArrowDown':
-        break;
+          messageContainer.scrollBy(0, arrowScrollPx);
-      case 'PageUp':
+          break;
-        messageContainer.scrollBy(0, -pageScrollPx);
+        case 'PageUp':
-        break;
+          messageContainer.scrollBy(0, -pageScrollPx);
-      case 'PageDown':
+          break;
-        messageContainer.scrollBy(0, pageScrollPx);
+        case 'PageDown':
-        break;
+          messageContainer.scrollBy(0, pageScrollPx);
-      default:
+          break;
+        default:
+      }
     }
   }