From 997ae6a29f7c4ed5b0e85a00df44591883d94a14 Mon Sep 17 00:00:00 2001
From: Nicholas Gao <nicholas.gao96@gmail.com>
Date: Fri, 5 Feb 2021 21:02:26 +0100
Subject: [PATCH 1/2] focus on composition area when pressing a key

---
 ts/components/CompositionArea.tsx | 32 +++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
index f1927a0b550..327be291a9e 100644
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@@ -357,6 +357,38 @@ export const CompositionArea = ({
     };
   }, [setLarge]);
 
+  // Listen to any key in the conversation panel to
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const { key } = e;
+
+      // We don't want to switch focus if another panel is up
+      const panels = document.querySelectorAll('.conversation .panel');
+      if (panels && panels.length > 1) {
+        return;
+      }
+
+      // We don't want to take focus away of input fields
+      const { activeElement } = document;
+      if (activeElement?.nodeName.toLowerCase() === 'input') {
+        return;
+      }
+
+      // Check if the key is a print character and not an control character
+      if (key.length === 1) {
+        const quills = document.getElementsByClassName('ql-editor');
+        if (quills.length > 0) {
+          (quills[0] as HTMLElement).focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handler);
+    return () => {
+      document.removeEventListener('keydown', handler);
+    };
+  });
+
   if (
     isBlocked ||
     areWePending ||

From d9befecf66800dec1f7896204bea4367d3796ce4 Mon Sep 17 00:00:00 2001
From: Nicholas Gao <nicholas.gao96@gmail.com>
Date: Fri, 5 Feb 2021 21:11:14 +0100
Subject: [PATCH 2/2] set focus properly

---
 ts/components/CompositionArea.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
index 327be291a9e..da67254b2a0 100644
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@@ -362,6 +362,11 @@ export const CompositionArea = ({
     const handler = (e: KeyboardEvent) => {
       const { key } = e;
 
+      // We don't want to react to a control character
+      if (key.length !== 1) {
+        return;
+      }
+
       // We don't want to switch focus if another panel is up
       const panels = document.querySelectorAll('.conversation .panel');
       if (panels && panels.length > 1) {
@@ -374,13 +379,7 @@ export const CompositionArea = ({
         return;
       }
 
-      // Check if the key is a print character and not an control character
-      if (key.length === 1) {
-        const quills = document.getElementsByClassName('ql-editor');
-        if (quills.length > 0) {
-          (quills[0] as HTMLElement).focus();
-        }
-      }
+      inputApiRef.current?.focus();
     };
 
     document.addEventListener('keydown', handler);