From 4527bce31e3ce7d7f0cbc6d5d65993484f6b0aa0 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Thu, 13 Jun 2024 09:58:48 -0300
Subject: [PATCH] refactor: Fix dropdownComponent rendering issue and improve
 tableNodeCellRender value handling

---
 .../src/components/dropdownComponent/index.tsx         |  3 +--
 .../components/tableNodeCellRender/index.tsx           |  4 +++-
 src/frontend/src/modals/genericModal/index.tsx         | 10 ++++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 0fd981603..03fb25202 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -35,10 +35,9 @@ export default function Dropdown({
 
   const PopoverContentDropdown =
     children || editNode ? PopoverContent : PopoverContentWithoutPortal;
-
   return (
     <>
-      {Object.keys(options)?.length > 0 ? (
+      {Object.keys(options ?? [])?.length > 0 ? (
         <>
           <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
             {children ? (
diff --git a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
index 925848d82..fcf76c823 100644
--- a/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableNodeCellRender/index.tsx
@@ -131,7 +131,9 @@ export default function TableNodeCellRender({
           <DictComponent
             disabled={disabled}
             editNode={true}
-            value={templateValue.toString() === "{}" ? {} : templateValue}
+            value={
+              (templateValue || "").toString() === "{}" ? {} : templateValue
+            }
             onChange={(newValue) => {
               handleOnNewValue(newValue, templateData.key);
             }}
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 227bcd705..6c99b1628 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -98,8 +98,14 @@ export default function GenericModal({
   useEffect(() => {
     setInputValue(value);
   }, [value, modalOpen]);
-  const coloredContent = (inputValue || "")
-    ?.toString()
+  let coloredContent = inputValue || "";
+  // Check if coloredContent is a string
+  // calling toString on undefined will throw an error
+  // so we need to check if it is a string first
+  if (typeof coloredContent !== "string") {
+    coloredContent = "";
+  }
+  coloredContent
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
     .replace(regexHighlight, (match, p1, p2) => {