From 98f5efe5563c0d86f5cb6655022f0aec62bf68ec Mon Sep 17 00:00:00 2001
From: shuhaib s <95394061+shuhaib-aot@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:12:52 +0530
Subject: [PATCH] Bugfix/fwf 3911 formbuilder modal (#337)

* Fixed form builder modal save button click

* added comment on useEffect
---
 .../src/components/CustomComponents/Button.tsx   |  4 ++++
 .../CustomComponents/FormBuilderModal.tsx        | 16 +++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/forms-flow-components/src/components/CustomComponents/Button.tsx b/forms-flow-components/src/components/CustomComponents/Button.tsx
index a11ffd8c4..8e9be450d 100644
--- a/forms-flow-components/src/components/CustomComponents/Button.tsx
+++ b/forms-flow-components/src/components/CustomComponents/Button.tsx
@@ -15,6 +15,7 @@ interface CustomButtonProps {
   variant: string;
   size?: "sm" | "md" | "lg" ;
   label: string;
+  name?: string,
   onClick?: () => void;
   isDropdown?: boolean;
   dropdownItems?: DropdownItem[];
@@ -38,6 +39,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
   className = "",
   dataTestid = "",
   ariaLabel = "",
+  name =  "",
   buttonLoading = false,
 }) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -80,6 +82,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
           ref={buttonRef}
           data-testid={dataTestid}
           aria-label={ariaLabel}
+          name={name}
           className={`${size !== 'md' ? className : `btn-md ${className}`}`}
         >
           {label}
@@ -117,6 +120,7 @@ export const CustomButton: React.FC<CustomButtonProps> = ({
       size={size!='md' ? size : undefined}
       onClick={onClick}
       disabled={disabled || buttonLoading}
+      name={name}
       className={`${size !== 'md' ? className : `btn-md ${className}`}`}
       data-testid={dataTestid}
       aria-label={ariaLabel}
diff --git a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
index 85c56b851..4b241d2d4 100644
--- a/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
+++ b/forms-flow-components/src/components/CustomComponents/FormBuilderModal.tsx
@@ -91,9 +91,13 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
       setValues(prev => ({...prev,[name]:value}))
     }
     
-    const handleOnBlur = ()=>{
-      if(!values.title || values.title !== cachedTitle){
-        nameValidationOnBlur(values)
+    const handleOnBlur = (e)=>{ 
+      //TBD: need to prevent this function on modal close
+      const relatedTargetName = e.relatedTarget?.name;
+      const createButtonClicked =  relatedTargetName == "createButton";
+      const isCancelButton = relatedTargetName == "cancelButton"; 
+       if((!values.title || values.title !== cachedTitle) && !isCancelButton){
+        nameValidationOnBlur({...values,createButtonClicked})
         setCachedTitle(values.title);
       }
     }
@@ -103,6 +107,10 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
         setValues({title:"",description:"", display: checked ? "wizard" : "form" }) 
         setCachedTitle('');
       }
+      if(showBuildForm){
+        //reset the name error on starting
+        setNameError("");
+      }
     },[showBuildForm])
 
     return (
@@ -176,6 +184,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
               label={primaryBtnLabel}
               buttonLoading={isLoading}
               onClick={handlePrimaryAction} // Use the new handler
+              name="createButton"
               dataTestid={primaryBtndataTestid}
               ariaLabel={primaryBtnariaLabel}
             />
@@ -183,6 +192,7 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
             <CustomButton
               variant="secondary"
               size="md"
+              name="cancelButton"
               label={secondaryBtnLabel}
               onClick={secondaryBtnAction}
               dataTestid={secondoryBtndataTestid}