Bugfix/fwf 3911 formbuilder modal (#337)

* Fixed form builder modal save button click * added comment on useEffect
AOT-Technologies · Nov 13, 2024 · 98f5efe · 98f5efe
1 parent 771999a
commit 98f5efe
Showing 2 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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,13 +184,15 @@ export const FormBuilderModal: React.FC<BuildFormModalProps> = React.memo(
               label={primaryBtnLabel}
               buttonLoading={isLoading}
               onClick={handlePrimaryAction} // Use the new handler
+              name="createButton"
               dataTestid={primaryBtndataTestid}
               ariaLabel={primaryBtnariaLabel}
             />
 
             <CustomButton
               variant="secondary"
               size="md"
+              name="cancelButton"
               label={secondaryBtnLabel}
               onClick={secondaryBtnAction}
               dataTestid={secondoryBtndataTestid}