From 4e0444cfbf903ce50dd99552683b4fa502a1582d Mon Sep 17 00:00:00 2001
From: sherif-olaboye <123654949+sherif-olaboye@users.noreply.github.com>
Date: Thu, 28 May 2026 16:44:34 +0100
Subject: [PATCH 1/4] TD-6954 selection and deselection is not working

---
 .../frameworks/selectoptionalcompetencies.ts  | 30 +++++++++----------
 .../SelectOptionalCompetencies.cshtml         |  6 +++-
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
index 0417a0b34a..df848d7a9c 100644
--- a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
+++ b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
@@ -1,27 +1,27 @@
 document.addEventListener('DOMContentLoaded', () => {
+  // Explicitly tell TypeScript these are HTMLInputElements
   const groups = document.querySelectorAll<HTMLDivElement>('.nhsuk-checkboxes');
 
   groups.forEach((group) => {
+    // Cast the specific input types
     const groupToggle = group.querySelector<HTMLInputElement>('input[name="GroupIds"]');
-    if (!groupToggle) return;
-
-    // All individual competency checkboxes in the group
-    const childCheckboxes = group.querySelectorAll<HTMLInputElement>(
-      'input[name="SelectedCompetencyIds"]',
-    );
+    const childCheckboxes = group.querySelectorAll<HTMLInputElement>('input[name="SelectedCompetencyIds"]');
 
-    const updateState = () => {
-      const isChecked = groupToggle.checked;
+    if (!groupToggle) return;
 
-      childCheckboxes.forEach((_, index) => {
-        childCheckboxes[index].checked = isChecked;
-      });
+    const syncChildren = () => {
+      if (groupToggle.checked) {
+        childCheckboxes.forEach(cb => cb.checked = true);
+      }
     };
 
-    // Run when the group checkbox changes
-    groupToggle.addEventListener('change', updateState);
+    syncChildren();
 
-    // Also run at page load in case some are pre-checked server-side
-    updateState();
+    groupToggle.addEventListener('change', () => {
+      syncChildren();
+      if (!groupToggle.checked) {
+        childCheckboxes.forEach(cb => cb.checked = false);
+      }
+    });
   });
 });
diff --git a/DigitalLearningSolutions.Web/Views/CompetencyAssessments/SelectOptionalCompetencies.cshtml b/DigitalLearningSolutions.Web/Views/CompetencyAssessments/SelectOptionalCompetencies.cshtml
index cb3df401cf..13bfd420f7 100644
--- a/DigitalLearningSolutions.Web/Views/CompetencyAssessments/SelectOptionalCompetencies.cshtml
+++ b/DigitalLearningSolutions.Web/Views/CompetencyAssessments/SelectOptionalCompetencies.cshtml
@@ -60,7 +60,11 @@
                         @foreach (var competency in competencyGroup)
                         {
                             <div class="nhsuk-checkboxes__item">
-                                <input class="nhsuk-checkboxes__input" data-group="@competencyGroup.Key" id="competency-check-@competency.StructureId" name="SelectedCompetencyIds" checked="@(Model.SelectedCompetencyIds != null ? Model.SelectedCompetencyIds.Contains((int)competency.CompetencyID) : false)" type="checkbox" value="@competency.StructureId">
+                                <input class="nhsuk-checkboxes__input"
+                                data-group="@competencyGroup.Key"
+                                  id="competency-check-@competency.StructureId"
+                                  name="SelectedCompetencyIds"
+                                checked="@(competencyGroup.Any(x => x.GroupOptionalCompetencies) || competency.Optional ? "checked" : null)"type="checkbox" value="@competency.StructureId">
                                 <label class="nhsuk-label nhsuk-checkboxes__label" for="competency-check-@competency.StructureId">
                                     @foreach (var flag in competency.CompetencyFlags)
                                     {

From 978bc65eda75ace6cfb867c151b0de384f24a88a Mon Sep 17 00:00:00 2001
From: sherif-olaboye <123654949+sherif-olaboye@users.noreply.github.com>
Date: Thu, 28 May 2026 17:13:56 +0100
Subject: [PATCH 2/4] TD-6954 fixing the PR error

---
 .../frameworks/selectoptionalcompetencies.ts  | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
index df848d7a9c..8c4b5b405b 100644
--- a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
+++ b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
@@ -1,26 +1,36 @@
 document.addEventListener('DOMContentLoaded', () => {
-  // Explicitly tell TypeScript these are HTMLInputElements
   const groups = document.querySelectorAll<HTMLDivElement>('.nhsuk-checkboxes');
 
   groups.forEach((group) => {
-    // Cast the specific input types
-    const groupToggle = group.querySelector<HTMLInputElement>('input[name="GroupIds"]');
-    const childCheckboxes = group.querySelectorAll<HTMLInputElement>('input[name="SelectedCompetencyIds"]');
+    const groupToggle =
+      group.querySelector<HTMLInputElement>('input[name="GroupIds"]');
 
-    if (!groupToggle) return;
+    const childCheckboxes =
+      group.querySelectorAll<HTMLInputElement>('input[name="SelectedCompetencyIds"]');
+
+    if (!groupToggle) {
+      return;
+    }
 
     const syncChildren = () => {
       if (groupToggle.checked) {
-        childCheckboxes.forEach(cb => cb.checked = true);
+        childCheckboxes.forEach((checkbox) => {
+          checkbox.checked = true;
+        });
       }
     };
 
     syncChildren();
 
     groupToggle.addEventListener('change', () => {
-      syncChildren();
-      if (!groupToggle.checked) {
-        childCheckboxes.forEach(cb => cb.checked = false);
+      if (groupToggle.checked) {
+        childCheckboxes.forEach((checkbox) => {
+          checkbox.checked = true;
+        });
+      } else {
+        childCheckboxes.forEach((checkbox) => {
+          checkbox.checked = false;
+        });
       }
     });
   });

From bd4ac96b82871f60333a4ce422808ccb08631808 Mon Sep 17 00:00:00 2001
From: sherif-olaboye <123654949+sherif-olaboye@users.noreply.github.com>
Date: Thu, 28 May 2026 17:32:09 +0100
Subject: [PATCH 3/4] TD-6954 fixing the PR error

---
 .../frameworks/selectoptionalcompetencies.ts  | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
index 8c4b5b405b..b977670906 100644
--- a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
+++ b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
@@ -6,32 +6,27 @@
       group.querySelector<HTMLInputElement>('input[name="GroupIds"]');
 
     const childCheckboxes =
-      group.querySelectorAll<HTMLInputElement>('input[name="SelectedCompetencyIds"]');
+      group.querySelectorAll<HTMLInputElement>(
+        'input[name="SelectedCompetencyIds"]',
+      );
 
     if (!groupToggle) {
       return;
     }
 
-    const syncChildren = () => {
-      if (groupToggle.checked) {
-        childCheckboxes.forEach((checkbox) => {
-          checkbox.checked = true;
-        });
-      }
+    const setChildrenCheckedState = (checked: boolean) => {
+      childCheckboxes.forEach((checkboxElement) => {
+        const checkbox = checkboxElement;
+        checkbox.checked = checked;
+      });
     };
 
-    syncChildren();
+    if (groupToggle.checked) {
+      setChildrenCheckedState(true);
+    }
 
     groupToggle.addEventListener('change', () => {
-      if (groupToggle.checked) {
-        childCheckboxes.forEach((checkbox) => {
-          checkbox.checked = true;
-        });
-      } else {
-        childCheckboxes.forEach((checkbox) => {
-          checkbox.checked = false;
-        });
-      }
+      setChildrenCheckedState(groupToggle.checked);
     });
   });
 });

From c39ff3087650ae8fc6677e10851d9500629bdbc7 Mon Sep 17 00:00:00 2001
From: sherif-olaboye <123654949+sherif-olaboye@users.noreply.github.com>
Date: Wed, 3 Jun 2026 14:28:18 +0100
Subject: [PATCH 4/4] TD-6954 Return the comment in the code

---
 .../Scripts/frameworks/selectoptionalcompetencies.ts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
index b977670906..2cd7a44579 100644
--- a/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
+++ b/DigitalLearningSolutions.Web/Scripts/frameworks/selectoptionalcompetencies.ts
@@ -4,7 +4,7 @@
   groups.forEach((group) => {
     const groupToggle =
       group.querySelector<HTMLInputElement>('input[name="GroupIds"]');
-
+    // All individual competency checkboxes in the group
     const childCheckboxes =
       group.querySelectorAll<HTMLInputElement>(
         'input[name="SelectedCompetencyIds"]',