From 248de836bb589ec59af431c8710780db24a76103 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 24 Jan 2025 08:14:31 -0300
Subject: [PATCH] fix: improve modal z-index and keyboard event handling
 (#5898)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

📝 (NodeOutputfield/index.tsx): Add styleClasses property with value "z-40" to improve styling
📝 (outputModal/index.tsx): Add className property with value "z-50" to improve styling
📝 (textModal/index.tsx): Add handleEscapeKeyDown function to handle escape key event and close modal
---
 .../GenericNode/components/NodeOutputfield/index.tsx |  1 +
 .../GenericNode/components/outputModal/index.tsx     |  2 +-
 src/frontend/src/modals/textModal/index.tsx          | 12 +++++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index 1aa6f08ec..f4e5ba35b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -378,6 +378,7 @@ function NodeOutputField({
                   : "Inspect output"
                 : "Please build the component first"
             }
+            styleClasses="z-40"
           >
             <div className="flex items-center gap-2">
               <OutputModal
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
index 1aa48efe7..2f1d517ed 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/outputModal/index.tsx
@@ -11,7 +11,7 @@ export default function OutputModal({
 }): JSX.Element {
   const [activeTab, setActiveTab] = useState<"Outputs" | "Logs">("Outputs");
   return (
-    <BaseModal disable={disabled} size="large">
+    <BaseModal disable={disabled} size="large" className="z-50">
       <BaseModal.Header description="Inspect the output of the component below.">
         <div className="flex items-center">
           <span className="pr-2">Component Output</span>
diff --git a/src/frontend/src/modals/textModal/index.tsx b/src/frontend/src/modals/textModal/index.tsx
index d58af18e6..3a161028c 100644
--- a/src/frontend/src/modals/textModal/index.tsx
+++ b/src/frontend/src/modals/textModal/index.tsx
@@ -26,8 +26,18 @@ export default function TextModal({
   const [open, setOpen] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
 
+  const handleEscapeKeyDown = (event: KeyboardEvent) => {
+    setOpen(false);
+    event.stopPropagation();
+  };
+
   return (
-    <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
+    <BaseModal
+      size="medium-h-full"
+      open={open}
+      setOpen={setOpen}
+      onEscapeKeyDown={handleEscapeKeyDown}
+    >
       <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
       <BaseModal.Header description={""}>
         <span className="pr-2">View Text</span>