From e7b5bf0d96a1e860f1ab1414c413c5656f7efc70 Mon Sep 17 00:00:00 2001
From: Tyrone Yeh <tyrone_yeh@draytek.com>
Date: Sat, 3 Sep 2022 17:43:27 +0800
Subject: [PATCH] Add down key check has tribute container (#21016)

Fixes an issue where users would not be able to select by pressing the down arrow when using @TAG above a message

Bug videos:

https://user-images.githubusercontent.com/1255041/188095999-c4ccde18-e53b-4251-8a14-d90c4042d768.mp4
---
 web_src/js/features/comp/EasyMDE.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js
index 015fc35050..1f7fe45153 100644
--- a/web_src/js/features/comp/EasyMDE.js
+++ b/web_src/js/features/comp/EasyMDE.js
@@ -92,6 +92,18 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
       }
       cm.execCommand('delCharBefore');
     },
+    Up: (cm) => {
+      const tributeContainer = document.querySelector('.tribute-container');
+      if (!tributeContainer || tributeContainer.style.display === 'none') {
+        return cm.execCommand('goLineUp');
+      }
+    },
+    Down: (cm) => {
+      const tributeContainer = document.querySelector('.tribute-container');
+      if (!tributeContainer || tributeContainer.style.display === 'none') {
+        return cm.execCommand('goLineDown');
+      }
+    },
   });
   await attachTribute(inputField, {mentions: true, emoji: true});
   attachEasyMDEToElements(easyMDE);