diff --git a/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx b/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx index 34657234..dea01085 100644 --- a/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx +++ b/src/app/[locale]/incident/add/components/IncidentQuestionsLocationForm.tsx @@ -15,6 +15,7 @@ import { getCurrentStep, getNextStepPath } from '@/lib/utils/stepper' export const IncidentQuestionsLocationForm = () => { const { formState: formStoreState, updateForm } = useFormStore() + const [isBlocking, setIsBlocking] = useState(false) const [additionalQuestions, setAdditionalQuestions] = useState< PublicQuestion[] >([]) @@ -156,12 +157,21 @@ export const IncidentQuestionsLocationForm = () => { const question = additionalQuestions[index] const fieldName = question.key - return + return ( + + ) }) ) : ( )} - + ) diff --git a/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx b/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx index 94552b5d..7ba87f24 100644 --- a/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx +++ b/src/app/[locale]/incident/add/components/questions/RenderSingleField.tsx @@ -11,9 +11,14 @@ import { LocationSelect } from '@/app/[locale]/incident/add/components/questions import { evaluateConditions } from '@/lib/utils/check-visibility' import { AssetSelect } from '@/app/[locale]/incident/add/components/questions/AssetSelect' -export const RenderSingleField = ({ field }: { field: PublicQuestion }) => { +type props = { + field: PublicQuestion + setIsBlocking: any +} + +export const RenderSingleField = ({ field, setIsBlocking }: props) => { const [shouldRender, setShouldRender] = useState(false) - const { watch, setValue } = useFormContext() + const { watch, setValue, unregister } = useFormContext() const { formState: formStoreState, updateForm } = useFormStore() const watchValues = watch() @@ -131,6 +136,11 @@ export const RenderSingleField = ({ field }: { field: PublicQuestion }) => { // Register the field immediately with initial value useEffect(() => { + // unregisters field if it should not render + if (!shouldRender) { + unregister(field.key) + } + const defaultValue = field.field_type === FieldTypes.CHECKBOX_INPUT ? getDefaultValueCheckboxInput(field.key) @@ -145,15 +155,18 @@ export const RenderSingleField = ({ field }: { field: PublicQuestion }) => { // control hard stop useEffect(() => { if (field.meta.validators) { - const isBlocking = - field.meta.validators === 'isBlocking' - ? true - : !!field.meta.validators.includes('isBlocking') - - updateForm({ - ...formStoreState, - isBlocking: shouldRender ? isBlocking : false, - }) + const isBlocking = !!( + field.meta.validators === 'isBlocking' || + (typeof field.meta.validators === 'object' && + field.meta.validators.includes('isBlocking')) + ) + + setIsBlocking(shouldRender ? isBlocking : false) + // refactor uit de state + // updateForm({ + // ...formStoreState, + // isBlocking: shouldRender ? isBlocking : false, + // }) } }, [field, shouldRender]) diff --git a/src/app/[locale]/incident/components/IncidentFormFooter.tsx b/src/app/[locale]/incident/components/IncidentFormFooter.tsx index ecfe0bbb..a6efcabe 100644 --- a/src/app/[locale]/incident/components/IncidentFormFooter.tsx +++ b/src/app/[locale]/incident/components/IncidentFormFooter.tsx @@ -10,7 +10,7 @@ import { IconLoader2, IconSend, } from '@tabler/icons-react' -import { FieldErrors } from 'react-hook-form' +import { FieldErrors, useFormContext } from 'react-hook-form' import { getCurrentStep, getPreviousStepPath } from '@/lib/utils/stepper' import { FormStep } from '@/types/form' import { useFormStore } from '@/store/form_store' @@ -20,6 +20,7 @@ type IncidentFormFooterProps = { loading?: boolean ariaDescribedById?: string errors?: FieldErrors + blockNext?: boolean } & React.HTMLAttributes const IncidentFormFooter = ({ @@ -27,12 +28,14 @@ const IncidentFormFooter = ({ loading, ariaDescribedById, errors, + blockNext, }: IncidentFormFooterProps) => { const t = useTranslations('general.form') const pathname = usePathname() const router = useRouter() const step = getCurrentStep(pathname) const { formState } = useFormStore() + const form = useFormContext() const goBack = () => { const previousStep = getPreviousStepPath(step) @@ -58,7 +61,7 @@ const IncidentFormFooter = ({ appearance="primary-action-button" type="submit" className="!flex !flex-row !items-center" - disabled={formState.isBlocking} + disabled={blockNext} > {t('next_button')}