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')}