From 05f28c0846e1327a79ec77c3bf76221260f87078 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Thu, 26 Dec 2024 23:32:30 +0100
Subject: [PATCH] feat: scroll checkbox/radio label into view

---
 .../incident/add/components/FeatureListItem.tsx       | 10 ++++++++++
 .../add/components/questions/CheckboxInput.tsx        | 11 +++++++++++
 .../incident/add/components/questions/RadioInput.tsx  | 10 ++++++++++
 3 files changed, 31 insertions(+)

diff --git a/src/app/[locale]/incident/add/components/FeatureListItem.tsx b/src/app/[locale]/incident/add/components/FeatureListItem.tsx
index 2be0d653..2b85d6b0 100644
--- a/src/app/[locale]/incident/add/components/FeatureListItem.tsx
+++ b/src/app/[locale]/incident/add/components/FeatureListItem.tsx
@@ -122,6 +122,16 @@ export const FeatureListItem = ({
           id={featureId.toString()}
           // @ts-ignore
           onChange={(e) => addOrRemoveFeature(e.target.checked)}
+          onFocus={(evt) => {
+            const label = evt.target.closest('label')
+            if (label) {
+              label.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+              })
+            }
+          }}
         />
       </FormField>
     </li>
diff --git a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
index 4f6b1dd6..59a1dc04 100644
--- a/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/CheckboxInput.tsx
@@ -4,6 +4,7 @@ import { getValidators } from '@/lib/utils/form-validator'
 import React from 'react'
 import { useFormContext } from 'react-hook-form'
 import { CheckboxGroup } from '@/components/index'
+import type { FocusEvent } from 'react'
 
 interface CheckboxInputProps extends QuestionField {}
 
@@ -31,6 +32,16 @@ export const CheckboxInput = ({ field }: CheckboxInputProps) => {
           label: field.meta.values[key],
           value: key,
           id: `${field.key}-${key}`,
+          onFocus: (evt: FocusEvent<HTMLInputElement>) => {
+            const label = evt.target.closest('label')
+            if (label) {
+              label.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest',
+              })
+            }
+          },
         }
       })}
       invalid={Boolean(errorMessage)}
diff --git a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
index 58136fe1..6e682ac0 100644
--- a/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
+++ b/src/app/[locale]/incident/add/components/questions/RadioInput.tsx
@@ -36,6 +36,16 @@ export const RadioInput = ({ field }: RadioGroupProps) => {
       invalid={Boolean(errorMessage)}
       errorMessage={errorMessage}
       description={field.meta.subtitle}
+      onFocus={(evt) => {
+        const label = evt.target.closest('label')
+        if (label) {
+          label.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'nearest',
+          })
+        }
+      }}
     ></RadioGroupNLDS>
   )
 }