diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 9ba83c056..aa948b43a 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -13,6 +13,7 @@ import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { postCustomComponent, postValidateCode } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
+import useFlowStore from "../../stores/flowStore";
 import { codeAreaModalPropsType } from "../../types/components";
 import BaseModal from "../baseModal";
 
@@ -28,6 +29,7 @@ export default function CodeAreaModal({
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const dark = useDarkStore((state) => state.dark);
+  const unselectAll = useFlowStore((state) => state.unselectAll);
 
   const [height, setHeight] = useState<string | null>(null);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -45,6 +47,8 @@ export default function CodeAreaModal({
   }, []);
 
   useEffect(() => {
+    unselectAll();
+
     if (openModal) setOpen(true);
   }, [openModal]);
 
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 44173057f..6a68f6aef 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -15,6 +15,7 @@ import {
 import { TypeModal } from "../../constants/enums";
 import { postValidatePrompt } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
+import useFlowStore from "../../stores/flowStore";
 import { genericModalPropsType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, varHighlightHTML } from "../../utils/utils";
@@ -46,6 +47,7 @@ export default function GenericModal({
   const textRef = useRef<HTMLTextAreaElement>(null);
   const divRef = useRef(null);
   const divRefPrompt = useRef(null);
+  const unselectAll = useFlowStore((state) => state.unselectAll);
 
   function checkVariables(valueToCheck: string): void {
     const regex = /\{([^{}]+)\}/g;
@@ -89,6 +91,7 @@ export default function GenericModal({
 
   useEffect(() => {
     setInputValue(value);
+    unselectAll();
   }, [value, modalOpen]);
 
   const coloredContent = (inputValue || "")