From a0fee1f22f6eaf7ae4db2b88d69ad950738091f8 Mon Sep 17 00:00:00 2001
From: Horacio Herrera <hi@horacioh.com>
Date: Mon, 4 Mar 2024 19:36:50 +0100
Subject: [PATCH] fix(mentions): prevent making mentions stay open on other
 interactions

---
 frontend/packages/editor/src/autocomplete.tsx | 72 ++++++++++++-------
 1 file changed, 46 insertions(+), 26 deletions(-)

diff --git a/frontend/packages/editor/src/autocomplete.tsx b/frontend/packages/editor/src/autocomplete.tsx
index af1a1c8ff..f6f40d840 100644
--- a/frontend/packages/editor/src/autocomplete.tsx
+++ b/frontend/packages/editor/src/autocomplete.tsx
@@ -298,37 +298,57 @@ function AutocompletePopupInner(
   return (
     <div
       style={{
-        display: 'flex',
-        flexDirection: 'column',
         position: 'fixed',
         top: rect.bottom + 4,
         left: rect.left,
-        width: '20em',
-        height: '10em',
-        background: 'white',
-        borderRadius: 4,
-        overflow: 'scroll',
-        backgroundColor: 'transparent',
+        zIndex: 999999,
       }}
     >
-      {/* <div>Query: "{text}"</div> */}
-      {suggestions.length === 0 && <div>No Results</div>}
-      {suggestions.map((suggestion, i) => {
-        return (
-          <SuggestionItem
-            selected={i === index}
-            name={suggestion.profile.alias}
-            key={suggestion.id}
-            onMouseEnter={() => {
-              // setIndex(i)
-            }}
-            onPress={() => {
-              onCreate(suggestion, range)
-              onClose()
-            }}
-          />
-        )
-      })}
+      <div
+        style={{
+          position: 'fixed',
+          width: '100vw',
+          height: '100vh',
+          top: 0,
+          left: 0,
+        }}
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          onClose()
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '20em',
+          height: '10em',
+          borderRadius: 4,
+          overflow: 'scroll',
+          backgroundColor: 'transparent',
+        }}
+      >
+        {/* <div>Query: "{text}"</div> */}
+        {suggestions.length === 0 && <div>No Results</div>}
+        {suggestions.map((suggestion, i) => {
+          return (
+            <SuggestionItem
+              selected={i === index}
+              name={suggestion.profile.alias}
+              key={suggestion.id}
+              onMouseEnter={() => {
+                // setIndex(i)
+              }}
+              onPress={() => {
+                onCreate(suggestion, range)
+                onClose()
+              }}
+            />
+          )
+        })}
+      </div>
     </div>
   )
 }