From e005f8be5474b7d1baaae75b9ab70824986c6200 Mon Sep 17 00:00:00 2001
From: Ela <103253928+ela-codes@users.noreply.github.com>
Date: Sun, 14 Dec 2025 13:18:10 -0600
Subject: [PATCH 1/4] fix(forms): improve conditional question logic in
 StepperForm

Refactors StepperForm to filter and validate only visible questions based on conditional dependencies. Updates form validation mode to 'onSubmit', disables immediate validation on select fields, and ensures navigation buttons are enabled only when all required visible fields are filled. Also adds a helper for conditional question visibility and improves navigation and error handling.
---
 app/api/forms/[role]/route.ts              |   3 +-
 components/forms/SelectField.tsx           |   2 +-
 components/multi-step-form/StepperForm.tsx | 162 ++++++++++++++-------
 3 files changed, 109 insertions(+), 58 deletions(-)

diff --git a/app/api/forms/[role]/route.ts b/app/api/forms/[role]/route.ts
index 9d861031..159050e1 100644
--- a/app/api/forms/[role]/route.ts
+++ b/app/api/forms/[role]/route.ts
@@ -53,7 +53,8 @@ export async function POST(
 
     // Get role and questions
 
-    const roleSlug = context.params.role;
+    const params = await context.params;
+    const roleSlug = params.role;
 
     console.log(`Processing application for role: ${roleSlug}`);
 
diff --git a/components/forms/SelectField.tsx b/components/forms/SelectField.tsx
index 21b7bd3c..954c3327 100644
--- a/components/forms/SelectField.tsx
+++ b/components/forms/SelectField.tsx
@@ -68,7 +68,7 @@ const SelectField = memo(function SelectField({
       <Select
         onValueChange={(newValue) => {
           setValue(name, newValue, {
-            shouldValidate: true, // Validate immediately on selection
+            shouldValidate: false, // Don't validate immediately on selection
             shouldDirty: true,
             shouldTouch: true,
           });
diff --git a/components/multi-step-form/StepperForm.tsx b/components/multi-step-form/StepperForm.tsx
index 2dd64fdc..9ef2a776 100644
--- a/components/multi-step-form/StepperForm.tsx
+++ b/components/multi-step-form/StepperForm.tsx
@@ -79,7 +79,7 @@ function StepperFormContent({
 
   // Create a single form instance with validation options
   const form = useForm({
-    mode: 'onBlur', // Only validate when field loses focus, not on every change
+    mode: 'onSubmit', // Only validate on submit, not on every change
     criteriaMode: 'all', // Show all validation errors
     shouldFocusError: true, // Focus on first error field
     resolver: zodResolver(
@@ -107,7 +107,37 @@ function StepperFormContent({
       // Get required fields for the current step
       const currentQuestions =
         methods.current.id === 'general' ? generalQuestions : roleQuestions;
-      const requiredFields = currentQuestions
+        
+      // Get current form values to filter conditional questions
+      const currentValues = form.getValues();
+      
+      // Filter questions to only show ones that satisfy their conditions
+      const visibleQuestions = currentQuestions.filter((q) => {
+        // If the question has no showIf condition, always show it
+        if (!q.showIf) return true;
+
+        // Check each condition to determine if the question should be shown
+        for (const [dependentField, requiredValue] of Object.entries(q.showIf)) {
+          const fieldValue = currentValues[dependentField];
+
+          // If required value is an array, check if the current value is in that array
+          if (Array.isArray(requiredValue)) {
+            // Convert to string for comparison since form values are often strings
+            const strValue =
+              typeof fieldValue === 'string' ? fieldValue : String(fieldValue || '');
+            if (!requiredValue.includes(strValue)) {
+              return false;
+            }
+          }
+          // Otherwise check if the current value equals the required value
+          else if (fieldValue !== requiredValue) {
+            return false;
+          }
+        }
+        return true;
+      });
+      
+      const requiredFields = visibleQuestions
         .filter((q) => !q.optional)
         .map((q) => q.name);
 
@@ -267,6 +297,8 @@ function StepperFormContent({
               title="General Questions"
               description="We'll use this information to get to know you better"
               onNext={() => navigateToStep('role_specific')}
+              onPrevious={null}
+              onSubmit={null}
               showPrevious={false}
             />
           ),
@@ -275,6 +307,7 @@ function StepperFormContent({
               questions={roleQuestions}
               title="Department & Role Questions"
               description={`Questions specific to the ${role.department} department and this role`}
+              onNext={null}
               onPrevious={() => navigateToStep('general')}
               onSubmit={handleSubmit}
               isLastStep={true}
@@ -286,6 +319,38 @@ function StepperFormContent({
   );
 }
 
+// Helper function to check if a question should be shown based on dependencies
+const shouldShowQuestion = (
+  question: FormQuestion,
+  formValues: Record<string, unknown>
+): boolean => {
+  // If the question has no showIf condition, always show it
+  if (!question.showIf) return true;
+
+  // Check each condition to determine if the question should be shown
+  for (const [dependentField, requiredValue] of Object.entries(
+    question.showIf
+  )) {
+    const fieldValue = formValues[dependentField];
+
+    // If required value is an array, check if the current value is in that array
+    if (Array.isArray(requiredValue)) {
+      // Convert to string for comparison since form values are often strings
+      const strValue =
+        typeof fieldValue === 'string' ? fieldValue : String(fieldValue || '');
+      if (!requiredValue.includes(strValue)) {
+        return false;
+      }
+    }
+    // Otherwise check if the current value equals the required value
+    else if (fieldValue !== requiredValue) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
 function StepForm({
   questions,
   title,
@@ -298,75 +363,56 @@ function StepForm({
 }: {
   questions: FormQuestion[];
   title: string;
-  description?: string;
-  onNext?: () => void;
-  onPrevious?: () => void;
-  onSubmit?: (data: Record<string, unknown>) => Promise<void>;
+  description: string;
+  onNext: (() => void) | null;
+  onPrevious: (() => void) | null;
+  onSubmit: ((data: Record<string, unknown>) => Promise<void>) | null;
   isLastStep?: boolean;
   showPrevious?: boolean;
 }) {
   const [isSubmitting, setIsSubmitting] = useState(false);
-
-  // Get methods from the form context
-  const { handleSubmit, formState, trigger } = useFormContext();
+  const { handleSubmit, formState, trigger, getValues, watch } = useFormContext();
+  
+  // Watch form values to reactively check if all required fields are filled
+  const watchedValues = watch();
+  
+  // Filter questions to only show ones that satisfy their conditions (same logic as FormWrapper)
+  const visibleQuestions = questions.filter((q) => shouldShowQuestion(q, watchedValues));
+  
+  // Get required fields for validation from visible questions only
+  const requiredFields = visibleQuestions.filter((q) => !q.optional).map((q) => q.name);
+  
+  const allRequiredFilled = requiredFields.every((name) => {
+    const value = watchedValues[name];
+    return value !== undefined && value !== null && String(value).trim() !== '';
+  });
 
   const handleFormAction = async (data: Record<string, unknown>) => {
     if (isSubmitting) return;
-
     try {
       setIsSubmitting(true);
-
-      // Get required fields for validation
-      const requiredFields = questions
-        .filter((q) => !q.optional)
-        .map((q) => q.name);
-
-      // Explicitly trigger validation on all required fields
       const isValid = await trigger(requiredFields, { shouldFocus: true });
-
       if (!isValid) {
         setIsSubmitting(false);
-
-        // Find the first field with an error and scroll to it
         setTimeout(() => {
-          const firstErrorField = document.querySelector(
-            '[aria-invalid="true"]'
-          );
+          const firstErrorField = document.querySelector('[aria-invalid="true"]');
           if (firstErrorField) {
-            // Ensure the field is visible in the viewport with a reliable scroll
-            firstErrorField.scrollIntoView({
-              behavior: 'smooth',
-              block: 'center',
-            });
-
-            // Try to focus the field for better accessibility
+            firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
             if (firstErrorField instanceof HTMLElement) {
-              try {
-                firstErrorField.focus();
-              } catch (e) {
-                console.warn('Unable to focus error field:', e);
-              }
+              try { firstErrorField.focus(); } catch (e) { console.warn('Unable to focus error field:', e); }
             }
           } else {
-            // If no specific field error is found, scroll to the form
             const form = document.querySelector('form');
-            if (form) {
-              form.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            }
+            if (form) { form.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
           }
-        }, 150); // Slightly longer timeout to ensure DOM is ready
-
+        }, 150);
         return;
       }
-
       if (isLastStep && onSubmit) {
         await onSubmit(data);
       } else if (onNext) {
         onNext();
-        // Make sure to scroll to top after transitioning to next step
-        setTimeout(() => {
-          window.scrollTo({ top: 0, behavior: 'smooth' });
-        }, 50);
+        setTimeout(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, 50);
       }
     } catch (error) {
       console.error('Form error:', error);
@@ -384,10 +430,8 @@ function StepForm({
         onSubmit={() => Promise.resolve()}
         submitText={isLastStep ? 'Submit Application' : 'Continue'}
         hideSubmitButton={true}
-        // Don't show any error summary at the top
         error=""
       />
-
       {/* Navigation buttons */}
       <div className="mt-8 flex justify-between">
         {/* Left side - Previous button */}
@@ -395,10 +439,7 @@ function StepForm({
           {showPrevious && onPrevious && (
             <Button
               type="button"
-              onClick={() => {
-                // No validation needed when going back
-                onPrevious();
-              }}
+              onClick={() => { onPrevious(); }}
               variant="outline"
               size="lg"
               className="md:w-auto min-w-[200px]"
@@ -408,17 +449,26 @@ function StepForm({
             </Button>
           )}
         </div>
-
         {/* Right side - Next/Submit button */}
         <div>
           <Button
             type="button"
-            onClick={() => {
-              handleSubmit(handleFormAction)();
+            onClick={async () => {
+              if (!isLastStep) {
+                const isValid = await trigger(requiredFields, { shouldFocus: true });
+                if (isValid && onNext) {
+                  onNext();
+                  setTimeout(() => {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                  }, 50);
+                }
+              } else {
+                handleSubmit(handleFormAction)();
+              }
             }}
             size="lg"
             className="md:w-auto min-w-[200px]"
-            disabled={isSubmitting || formState.isSubmitting}
+            disabled={isSubmitting || formState.isSubmitting || !allRequiredFilled}
           >
             {isSubmitting || formState.isSubmitting
               ? isLastStep

From 041e4e578818b2438edf5ca4e8a604ef6ad1b35c Mon Sep 17 00:00:00 2001
From: Ela <103253928+ela-codes@users.noreply.github.com>
Date: Sun, 14 Dec 2025 13:38:32 -0600
Subject: [PATCH 2/4] fix(forms): refactor stepper form for cleaner conditional
 logic

Extracted and reused shouldShowQuestion and scrollToFirstError helpers to avoid code duplication and improve clarity. Now, visible questions are computed once per step and passed down, simplifying validation and navigation logic. Improved type safety and streamlined props for StepForm.
---
 components/multi-step-form/StepperForm.tsx | 256 ++++++++-------------
 1 file changed, 100 insertions(+), 156 deletions(-)

diff --git a/components/multi-step-form/StepperForm.tsx b/components/multi-step-form/StepperForm.tsx
index 9ef2a776..f616b316 100644
--- a/components/multi-step-form/StepperForm.tsx
+++ b/components/multi-step-form/StepperForm.tsx
@@ -13,6 +13,66 @@ import type { StepId } from './StepIndicator';
 import { Button } from '@/components/ui/button';
 import { z } from 'zod';
 
+// Helper function to check if a question should be shown based on dependencies
+export const shouldShowQuestion = (
+  question: FormQuestion,
+  formValues: Record<string, unknown>
+): boolean => {
+  // If the question has no showIf condition, always show it
+  if (!question.showIf) return true;
+
+  // Check each condition to determine if the question should be shown
+  for (const [dependentField, requiredValue] of Object.entries(
+    question.showIf
+  )) {
+    const fieldValue = formValues[dependentField];
+
+    // If required value is an array, check if the current value is in that array
+    if (Array.isArray(requiredValue)) {
+      // Convert to string for comparison since form values are often strings
+      const strValue =
+        typeof fieldValue === 'string'
+          ? fieldValue
+          : String(fieldValue ?? '');
+      if (!requiredValue.includes(strValue)) {
+        return false;
+      }
+    }
+    // Otherwise check if the current value equals the required value
+    else if (fieldValue !== requiredValue) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+// Helper function to scroll to the first error field
+const scrollToFirstError = () => {
+  setTimeout(() => {
+    const firstErrorField = document.querySelector('[aria-invalid="true"]');
+    if (firstErrorField) {
+      firstErrorField.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+
+      if (firstErrorField instanceof HTMLElement) {
+        try {
+          firstErrorField.focus();
+        } catch (e) {
+          console.warn('Unable to focus error field:', e);
+        }
+      }
+    } else {
+      const form = document.querySelector('form');
+      if (form) {
+        form.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  }, 150);
+};
+
 // Define the stepper with two steps
 const { Scoped, useStepper } = defineStepper(
   {
@@ -94,6 +154,15 @@ function StepperFormContent({
     },
   });
 
+  // Compute visible questions for each step
+  const currentValues = form.watch();
+  const visibleGeneralQuestions = generalQuestions.filter((q) =>
+    shouldShowQuestion(q, currentValues)
+  );
+  const visibleRoleQuestions = roleQuestions.filter((q) =>
+    shouldShowQuestion(q, currentValues)
+  );
+
   // Handle step navigation
   const navigateToStep = async (targetStep: StepId) => {
     // Reset any previous submission errors when navigating
@@ -104,39 +173,12 @@ function StepperFormContent({
       (methods.current.id === 'general' && targetStep === 'role_specific') ||
       methods.current.id === targetStep
     ) {
-      // Get required fields for the current step
-      const currentQuestions =
-        methods.current.id === 'general' ? generalQuestions : roleQuestions;
-        
-      // Get current form values to filter conditional questions
-      const currentValues = form.getValues();
-      
-      // Filter questions to only show ones that satisfy their conditions
-      const visibleQuestions = currentQuestions.filter((q) => {
-        // If the question has no showIf condition, always show it
-        if (!q.showIf) return true;
-
-        // Check each condition to determine if the question should be shown
-        for (const [dependentField, requiredValue] of Object.entries(q.showIf)) {
-          const fieldValue = currentValues[dependentField];
-
-          // If required value is an array, check if the current value is in that array
-          if (Array.isArray(requiredValue)) {
-            // Convert to string for comparison since form values are often strings
-            const strValue =
-              typeof fieldValue === 'string' ? fieldValue : String(fieldValue || '');
-            if (!requiredValue.includes(strValue)) {
-              return false;
-            }
-          }
-          // Otherwise check if the current value equals the required value
-          else if (fieldValue !== requiredValue) {
-            return false;
-          }
-        }
-        return true;
-      });
-      
+      // Get visible questions for the current step
+      const visibleQuestions =
+        methods.current.id === 'general'
+          ? visibleGeneralQuestions
+          : visibleRoleQuestions;
+
       const requiredFields = visibleQuestions
         .filter((q) => !q.optional)
         .map((q) => q.name);
@@ -145,36 +187,14 @@ function StepperFormContent({
       const isValid = await form.trigger(requiredFields, { shouldFocus: true });
 
       if (!isValid) {
-        // Find the first field with an error and scroll to it
-        setTimeout(() => {
-          const firstErrorField = document.querySelector(
-            '[aria-invalid="true"]'
-          );
-          if (firstErrorField) {
-            // Make sure we scroll with smooth behavior
-            firstErrorField.scrollIntoView({
-              behavior: 'smooth',
-              block: 'center',
-            });
-
-            // Also try to focus the element for better accessibility
-            if (firstErrorField instanceof HTMLElement) {
-              try {
-                firstErrorField.focus();
-              } catch (e) {
-                console.warn('Unable to focus error field:', e);
-              }
-            }
-          }
-        }, 100);
-
+        scrollToFirstError();
         return; // Don't proceed if validation fails
       }
     }
 
     // Save current data before navigating
-    const currentValues = form.getValues();
-    setFormData((prev) => ({ ...prev, ...currentValues }));
+    const currentFormValues = form.getValues();
+    setFormData((prev) => ({ ...prev, ...currentFormValues }));
 
     // Navigate to the requested step
     methods.goTo(targetStep);
@@ -216,26 +236,7 @@ function StepperFormContent({
       } else {
         // If validation fails on the final step, show field errors
         console.log('Validation failed:', validationResult.error);
-
-        // Find the first field with an error and scroll to it
-        setTimeout(() => {
-          const firstErrorField = document.querySelector(
-            '[aria-invalid="true"]'
-          );
-          if (firstErrorField) {
-            firstErrorField.scrollIntoView({
-              behavior: 'smooth',
-              block: 'center',
-            });
-          } else {
-            // If no specific field is found, scroll to top of form
-            const form = document.querySelector('form');
-            if (form) {
-              form.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            }
-          }
-        }, 100);
-
+        scrollToFirstError();
         return;
       }
     } catch (error) {
@@ -293,21 +294,18 @@ function StepperFormContent({
         {methods.switch({
           general: () => (
             <StepForm
-              questions={generalQuestions}
+              questions={visibleGeneralQuestions}
               title="General Questions"
               description="We'll use this information to get to know you better"
               onNext={() => navigateToStep('role_specific')}
-              onPrevious={null}
-              onSubmit={null}
               showPrevious={false}
             />
           ),
           role_specific: () => (
             <StepForm
-              questions={roleQuestions}
+              questions={visibleRoleQuestions}
               title="Department & Role Questions"
               description={`Questions specific to the ${role.department} department and this role`}
-              onNext={null}
               onPrevious={() => navigateToStep('general')}
               onSubmit={handleSubmit}
               isLastStep={true}
@@ -318,39 +316,6 @@ function StepperFormContent({
     </div>
   );
 }
-
-// Helper function to check if a question should be shown based on dependencies
-const shouldShowQuestion = (
-  question: FormQuestion,
-  formValues: Record<string, unknown>
-): boolean => {
-  // If the question has no showIf condition, always show it
-  if (!question.showIf) return true;
-
-  // Check each condition to determine if the question should be shown
-  for (const [dependentField, requiredValue] of Object.entries(
-    question.showIf
-  )) {
-    const fieldValue = formValues[dependentField];
-
-    // If required value is an array, check if the current value is in that array
-    if (Array.isArray(requiredValue)) {
-      // Convert to string for comparison since form values are often strings
-      const strValue =
-        typeof fieldValue === 'string' ? fieldValue : String(fieldValue || '');
-      if (!requiredValue.includes(strValue)) {
-        return false;
-      }
-    }
-    // Otherwise check if the current value equals the required value
-    else if (fieldValue !== requiredValue) {
-      return false;
-    }
-  }
-
-  return true;
-};
-
 function StepForm({
   questions,
   title,
@@ -364,24 +329,23 @@ function StepForm({
   questions: FormQuestion[];
   title: string;
   description: string;
-  onNext: (() => void) | null;
-  onPrevious: (() => void) | null;
-  onSubmit: ((data: Record<string, unknown>) => Promise<void>) | null;
+  onNext?: () => void;
+  onPrevious?: () => void;
+  onSubmit?: (data: Record<string, unknown>) => Promise<void>;
   isLastStep?: boolean;
   showPrevious?: boolean;
 }) {
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { handleSubmit, formState, trigger, getValues, watch } = useFormContext();
-  
+  const { handleSubmit, formState, trigger, watch } = useFormContext();
+
   // Watch form values to reactively check if all required fields are filled
   const watchedValues = watch();
-  
-  // Filter questions to only show ones that satisfy their conditions (same logic as FormWrapper)
-  const visibleQuestions = questions.filter((q) => shouldShowQuestion(q, watchedValues));
-  
-  // Get required fields for validation from visible questions only
-  const requiredFields = visibleQuestions.filter((q) => !q.optional).map((q) => q.name);
-  
+
+  // Get required fields for validation (questions are already filtered by parent)
+  const requiredFields = questions
+    .filter((q) => !q.optional)
+    .map((q) => q.name);
+
   const allRequiredFilled = requiredFields.every((name) => {
     const value = watchedValues[name];
     return value !== undefined && value !== null && String(value).trim() !== '';
@@ -393,26 +357,16 @@ function StepForm({
       setIsSubmitting(true);
       const isValid = await trigger(requiredFields, { shouldFocus: true });
       if (!isValid) {
-        setIsSubmitting(false);
-        setTimeout(() => {
-          const firstErrorField = document.querySelector('[aria-invalid="true"]');
-          if (firstErrorField) {
-            firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            if (firstErrorField instanceof HTMLElement) {
-              try { firstErrorField.focus(); } catch (e) { console.warn('Unable to focus error field:', e); }
-            }
-          } else {
-            const form = document.querySelector('form');
-            if (form) { form.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
-          }
-        }, 150);
+        scrollToFirstError();
         return;
       }
       if (isLastStep && onSubmit) {
         await onSubmit(data);
       } else if (onNext) {
         onNext();
-        setTimeout(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, 50);
+        setTimeout(() => {
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        }, 50);
       }
     } catch (error) {
       console.error('Form error:', error);
@@ -439,7 +393,7 @@ function StepForm({
           {showPrevious && onPrevious && (
             <Button
               type="button"
-              onClick={() => { onPrevious(); }}
+              onClick={onPrevious}
               variant="outline"
               size="lg"
               className="md:w-auto min-w-[200px]"
@@ -453,18 +407,8 @@ function StepForm({
         <div>
           <Button
             type="button"
-            onClick={async () => {
-              if (!isLastStep) {
-                const isValid = await trigger(requiredFields, { shouldFocus: true });
-                if (isValid && onNext) {
-                  onNext();
-                  setTimeout(() => {
-                    window.scrollTo({ top: 0, behavior: 'smooth' });
-                  }, 50);
-                }
-              } else {
-                handleSubmit(handleFormAction)();
-              }
+            onClick={() => {
+              handleSubmit(handleFormAction)();
             }}
             size="lg"
             className="md:w-auto min-w-[200px]"
@@ -482,4 +426,4 @@ function StepForm({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file

From a532221936d0f6809f3e1e8d594640ef563d1971 Mon Sep 17 00:00:00 2001
From: Ela <103253928+ela-codes@users.noreply.github.com>
Date: Sun, 14 Dec 2025 13:44:36 -0600
Subject: [PATCH 3/4] fix(forms): use imported shouldShowQuestion

Removed the local shouldShowQuestion helper and imported it from StepperForm to centralize logic and reduce code duplication.
---
 components/forms/FormWrapper.tsx | 33 +-------------------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/components/forms/FormWrapper.tsx b/components/forms/FormWrapper.tsx
index aece2f51..c316894b 100644
--- a/components/forms/FormWrapper.tsx
+++ b/components/forms/FormWrapper.tsx
@@ -12,6 +12,7 @@ import DigitsOnlyField from './DigitsOnlyField';
 import type { FormQuestion } from '@/types';
 import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { shouldShowQuestion } from '@/components/multi-step-form/StepperForm';
 
 interface FormWrapperProps {
   form?: UseFormReturn<Record<string, unknown>>; // Replace any with more specific type
@@ -26,38 +27,6 @@ interface FormWrapperProps {
   hideSubmitButton?: boolean;
 }
 
-// Helper function to check if a question should be shown based on dependencies
-const shouldShowQuestion = (
-  question: FormQuestion,
-  formValues: Record<string, unknown>
-): boolean => {
-  // If the question has no showIf condition, always show it
-  if (!question.showIf) return true;
-
-  // Check each condition to determine if the question should be shown
-  for (const [dependentField, requiredValue] of Object.entries(
-    question.showIf
-  )) {
-    const fieldValue = formValues[dependentField];
-
-    // If required value is an array, check if the current value is in that array
-    if (Array.isArray(requiredValue)) {
-      // Convert to string for comparison since form values are often strings
-      const strValue =
-        typeof fieldValue === 'string' ? fieldValue : String(fieldValue || '');
-      if (!requiredValue.includes(strValue)) {
-        return false;
-      }
-    }
-    // Otherwise check if the current value equals the required value
-    else if (fieldValue !== requiredValue) {
-      return false;
-    }
-  }
-
-  return true;
-};
-
 export default function FormWrapper({
   form: formProp,
   questions,

From 90b590832719af7ace0a56a8af604bdb28af5bd6 Mon Sep 17 00:00:00 2001
From: Ela <103253928+ela-codes@users.noreply.github.com>
Date: Sun, 14 Dec 2025 13:54:48 -0600
Subject: [PATCH 4/4] fix(forms): fix error validation on text field exit

---
 components/multi-step-form/StepperForm.tsx | 35 +++++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/components/multi-step-form/StepperForm.tsx b/components/multi-step-form/StepperForm.tsx
index f616b316..274d7244 100644
--- a/components/multi-step-form/StepperForm.tsx
+++ b/components/multi-step-form/StepperForm.tsx
@@ -139,12 +139,12 @@ function StepperFormContent({
 
   // Create a single form instance with validation options
   const form = useForm({
-    mode: 'onSubmit', // Only validate on submit, not on every change
+    mode: 'onSubmit', // Only validate on submit
+    reValidateMode: 'onSubmit', // Never re-validate automatically
     criteriaMode: 'all', // Show all validation errors
     shouldFocusError: true, // Focus on first error field
-    resolver: zodResolver(
-      methods.current.id === 'general' ? generalSchema : roleSchema
-    ),
+    shouldUnregister: false, // Keep all fields registered
+    // No resolver - we'll handle validation manually
     // Ensure every field has at least an empty string as default
     defaultValues: {
       ...Object.fromEntries(
@@ -183,13 +183,32 @@ function StepperFormContent({
         .filter((q) => !q.optional)
         .map((q) => q.name);
 
-      // Validate all fields with validation triggered
-      const isValid = await form.trigger(requiredFields, { shouldFocus: true });
-
-      if (!isValid) {
+      // Manually validate using the appropriate schema
+      const currentSchema = methods.current.id === 'general' ? generalSchema : roleSchema;
+      const currentValues = form.getValues();
+      const validationResult = currentSchema.safeParse(currentValues);
+
+      if (!validationResult.success) {
+        // Set errors for failed validations
+        validationResult.error.issues.forEach((issue) => {
+          const fieldName = issue.path[0] as string;
+          // Only set errors for fields on the current step
+          if (requiredFields.includes(fieldName)) {
+            form.setError(fieldName, {
+              type: 'validation',
+              message: issue.message,
+            });
+          }
+        });
+        
         scrollToFirstError();
         return; // Don't proceed if validation fails
       }
+      
+      // Clear errors on successful validation
+      requiredFields.forEach((fieldName) => {
+        form.clearErrors(fieldName);
+      });
     }
 
     // Save current data before navigating