From 1c1347faeb04683e62332add6add475fd172d9e8 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Fri, 28 Aug 2026 10:04:23 +0000
Subject: [PATCH] refactor: extract event values before updating state in
 editor drawers to prevent null reference errors

---
 .../components/DocumentRequirementEditorDrawer.tsx  | 13 +++++++++++--
 .../components/FieldEditorDrawer.tsx                | 10 ++++++++--
 .../components/SectionEditorDrawer.tsx              | 10 ++++++++--
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx
index d0fb51d9f..740457d99 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx
@@ -191,7 +191,13 @@ export function DocumentRequirementEditorDrawer({
           error={keyError}
           disabled={!isNew}
           description={isNew ? t('certReq.doc.keyHelp', 'Stable slug identifying this document slot') : t('certReq.doc.keyLocked', 'Key cannot change once created')}
-          onChange={(e) => setDraft((d) => ({ ...d, key: e.currentTarget.value }))}
+          // The value is read out of the event first: a functional updater
+          // runs after React has released the event, so `currentTarget` is
+          // null by the time it would be read inside one.
+          onChange={(e) => {
+            const { value } = e.currentTarget;
+            setDraft((d) => ({ ...d, key: value }));
+          }}
         />
 
         <BilingualInput
@@ -303,7 +309,10 @@ export function DocumentRequirementEditorDrawer({
           <Checkbox
             label={t('certReq.doc.requiresValidity', 'Requires validity dates')}
             checked={draft.requiresValidityDates}
-            onChange={(e) => setDraft((d) => ({ ...d, requiresValidityDates: e.currentTarget.checked }))}
+            onChange={(e) => {
+              const { checked } = e.currentTarget;
+              setDraft((d) => ({ ...d, requiresValidityDates: checked }));
+            }}
           />
         )}
 
diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/FieldEditorDrawer.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/FieldEditorDrawer.tsx
index 53cd32174..370ba0572 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/FieldEditorDrawer.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/FieldEditorDrawer.tsx
@@ -113,7 +113,10 @@ export function FieldEditorDrawer({
               ? t('certReq.field.keyHelp', 'Letters, numbers and underscores only — becomes the form data key')
               : t('certReq.field.keyLocked', 'Key cannot change once created')
           }
-          onChange={(e) => setDraft((d) => ({ ...d, key: e.currentTarget.value }))}
+          onChange={(e) => {
+            const { value } = e.currentTarget;
+            setDraft((d) => ({ ...d, key: value }));
+          }}
         />
 
         <BilingualInput
@@ -134,7 +137,10 @@ export function FieldEditorDrawer({
         <Checkbox
           label={t('certReq.field.required', 'Required')}
           checked={Boolean(draft.required)}
-          onChange={(e) => setDraft((d) => ({ ...d, required: e.currentTarget.checked }))}
+          onChange={(e) => {
+            const { checked } = e.currentTarget;
+            setDraft((d) => ({ ...d, required: checked }));
+          }}
         />
 
         <BilingualInput
diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/SectionEditorDrawer.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/SectionEditorDrawer.tsx
index 6110b8358..5bdd062f7 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/SectionEditorDrawer.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/SectionEditorDrawer.tsx
@@ -72,7 +72,10 @@ export function SectionEditorDrawer({
               ? t('certReq.section.keyHelp', 'Letters, numbers and underscores only')
               : t('certReq.section.keyLocked', 'Key cannot change once created')
           }
-          onChange={(e) => setDraft((d) => ({ ...d, key: e.currentTarget.value }))}
+          onChange={(e) => {
+            const { value } = e.currentTarget;
+            setDraft((d) => ({ ...d, key: value }));
+          }}
         />
 
         <BilingualInput
@@ -95,7 +98,10 @@ export function SectionEditorDrawer({
             'Sections sharing the same group render together on one step',
           )}
           value={draft.group ?? ''}
-          onChange={(e) => setDraft((d) => ({ ...d, group: e.currentTarget.value || undefined }))}
+          onChange={(e) => {
+            const { value } = e.currentTarget;
+            setDraft((d) => ({ ...d, group: value || undefined }));
+          }}
         />
 
         <NumberInput