Fix issue where dialogue / math expression autocomplete menu could ap…

…pear behind other UI elements
chrismaltby · Apr 30, 2024 · 439adbf · 439adbf
1 parent 699ea5e
commit 439adbf
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 91 deletions.
diff --git a/src/components/ui/form/DialogueTextarea.tsx b/src/components/ui/form/DialogueTextarea.tsx
@@ -19,6 +19,7 @@ import { VariableSelect } from "components/forms/VariableSelect";
 import { TextSpeedSelect } from "components/forms/TextSpeedSelect";
 import { SelectMenu, selectMenuStyleProps } from "./Select";
 import l10n from "shared/lib/lang/l10n";
+import { portalRoot } from "ui/layout/Portal";
 
 const varRegex = /\$([VLT0-9][0-9]*)\$/g;
 const charRegex = /#([VLT0-9][0-9]*)#/g;
@@ -88,49 +89,6 @@ const DialogueTextareaWrapper = styled.div<DialogueTextareaWrapperProps>`
     }
   }
 
-  .MentionsInput__suggestions {
-    background-color: transparent !important;
-    z-index: 100 !important;
-  }
-
-  .MentionsInput__suggestions__list {
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    width: max-content;
-    min-width: 100px;
-    user-select: none;
-    box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.3),
-      0 4px 11px hsla(0, 0%, 0%, 0.1);
-    background: ${(props) => props.theme.colors.menu.background};
-    color: ${(props) => props.theme.colors.text};
-    font-size: ${(props) => props.theme.typography.fontSize};
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-    padding: 4px 0;
-  }
-
-  .MentionsInput__suggestions__item {
-    display: flex;
-    align-items: center;
-    padding: 5px 10px;
-    font-size: ${(props) => props.theme.typography.menuFontSize};
-    &:focus {
-      background: ${(props) => props.theme.colors.menu.hoverBackground};
-      outline: none;
-      box-shadow: none;
-    }
-  }
-
-  .MentionsInput__suggestions__item:hover {
-    background-color: ${(props) => props.theme.colors.menu.hoverBackground};
-  }
-
-  .MentionsInput__suggestions__item--focused {
-    background-color: ${(props) => props.theme.colors.menu.activeBackground};
-  }
-
   .Mentions__TokenVar {
     position: relative;
     z-index: 1;
@@ -408,6 +366,7 @@ export const DialogueTextarea: FC<DialogueTextareaProps> = ({
           onChange(e.target.value)
         }
         inputRef={inputRef}
+        suggestionsPortalHost={portalRoot}
       >
         <CustomMention
           className="Mentions__TokenVar"

diff --git a/src/components/ui/form/MathTextarea.tsx b/src/components/ui/form/MathTextarea.tsx
@@ -12,6 +12,7 @@ import { RelativePortal } from "ui/layout/RelativePortal";
 import { SelectMenu, selectMenuStyleProps } from "./Select";
 import { VariableSelect } from "components/forms/VariableSelect";
 import l10n from "shared/lib/lang/l10n";
+import { portalRoot } from "ui/layout/Portal";
 
 const varRegex = /\$([VLT0-9][0-9]*)\$/g;
 
@@ -196,49 +197,6 @@ export const MathTextareaWrapper = styled.div`
     }
   }
 
-  .MentionsInput__suggestions {
-    background-color: transparent !important;
-    z-index: 10000 !important;
-  }
-
-  .MentionsInput__suggestions__list {
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    width: max-content;
-    min-width: 100px;
-    user-select: none;
-    box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.3),
-      0 4px 11px hsla(0, 0%, 0%, 0.1);
-    background: ${(props) => props.theme.colors.menu.background};
-    color: ${(props) => props.theme.colors.text};
-    font-size: ${(props) => props.theme.typography.fontSize};
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-    padding: 4px 0;
-  }
-
-  .MentionsInput__suggestions__item {
-    display: flex;
-    align-items: center;
-    padding: 5px 10px;
-    font-size: ${(props) => props.theme.typography.menuFontSize};
-    &:focus {
-      background: ${(props) => props.theme.colors.menu.hoverBackground};
-      outline: none;
-      box-shadow: none;
-    }
-  }
-
-  .MentionsInput__suggestions__item:hover {
-    background-color: ${(props) => props.theme.colors.menu.hoverBackground};
-  }
-
-  .MentionsInput__suggestions__item--focused {
-    background-color: ${(props) => props.theme.colors.menu.activeBackground};
-  }
-
   .Mentions__TokenVar {
     position: relative;
     z-index: 1;
@@ -386,6 +344,7 @@ export const MathTextarea: FC<MathTextareaProps> = ({
         placeholder={placeholder}
         allowSuggestionsAboveCursor={true}
         onChange={(e) => onChange(e.target.value)}
+        suggestionsPortalHost={portalRoot}
       >
         <CustomMention
           className="Mentions__TokenVar"

diff --git a/src/components/ui/globalStyle.ts b/src/components/ui/globalStyle.ts
@@ -201,6 +201,49 @@ const GlobalStyle = createGlobalStyle`
   .label--instrument-14 {
     background: #9b9c82;
   }
-  `;
+
+  .MentionsInput__suggestions {
+    background-color: transparent !important;
+    z-index: 1000 !important;
+  }
+
+  .MentionsInput__suggestions__list {
+    display: flex;
+    flex-direction: column;
+    border-radius: 4px;
+    width: max-content;
+    min-width: 100px;
+    user-select: none;
+    box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.3),
+      0 4px 11px hsla(0, 0%, 0%, 0.1);
+    background: ${(props) => props.theme.colors.menu.background};
+    color: ${(props) => props.theme.colors.text};
+    font-size: ${(props) => props.theme.typography.fontSize};
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol";
+    padding: 4px 0;
+  }
+
+  .MentionsInput__suggestions__item {
+    display: flex;
+    align-items: center;
+    padding: 5px 10px;
+    font-size: ${(props) => props.theme.typography.menuFontSize};
+    &:focus {
+      background: ${(props) => props.theme.colors.menu.hoverBackground};
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  .MentionsInput__suggestions__item:hover {
+    background-color: ${(props) => props.theme.colors.menu.hoverBackground};
+  }
+
+  .MentionsInput__suggestions__item--focused {
+    background-color: ${(props) => props.theme.colors.menu.activeBackground};
+  }
+`;
 
 export default GlobalStyle;
diff --git a/src/components/ui/layout/Portal.tsx b/src/components/ui/layout/Portal.tsx
@@ -1,9 +1,10 @@
 import { FC } from "react";
 import ReactDOM from "react-dom";
 
+export const portalRoot: HTMLElement = document.getElementById(
+  "MenuPortal"
+) as HTMLElement;
+
 export const Portal: FC = (props) => {
-  const root: HTMLElement = document.getElementById(
-    "MenuPortal"
-  ) as HTMLElement;
-  return ReactDOM.createPortal(props.children, root);
+  return ReactDOM.createPortal(props.children, portalRoot);
 };