Fix mark-all-present switch requiring two clicks after modal cancel

KSwitch optimistically toggles its internal state on click. When the
"mark all present" modal was cancelled, allPresent stayed false (unchanged),
so Vue never re-rendered the switch — leaving it visually on. The next
click then fired @change(false) (a no-op) instead of reopening the modal.

Introduce pendingMarkAll ref set true when the modal opens and false when
cancelled or confirmed. The switch binds to markAllSwitchValue (allPresent
|| pendingMarkAll), so cancelling creates a real true→false prop change
that forces the KSwitch to re-render back to unchecked.

Adds a regression test reproducing the exact cancel→single-click sequence.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: akolson

kolibri/plugins/coach/frontend/composables/useAttendanceForm.js

@@ -26,6 +26,7 @@ export default function useAttendanceForm({ hasChanges, markClean, submitting, o
   const previouslyEnrolledMap = ref({});
   const enrolledLearnerIds = ref(null);
   const showMarkAllModal = ref(false);
+  const pendingMarkAll = ref(false);
   const pendingRoute = ref(null);
 
   const backRoute = computed(() => ({
@@ -95,6 +96,12 @@ export default function useAttendanceForm({ hasChanges, markClean, submitting, o
       sortedLearners.value.length > 0 && currentPresentCount.value === sortedLearners.value.length,
   );
 
+  // The switch should appear checked if all learners are genuinely present, OR if the
+  // user has clicked "mark all present" and is seeing the confirmation modal (pendingMarkAll).
+  // When the modal is canceled, pendingMarkAll resets to false, which changes this computed
+  // from true → false and gives Vue a real prop change to re-render the KSwitch correctly.
+  const markAllPresent = computed(() => allPresent.value || pendingMarkAll.value);
+
   function setAllLearners(value) {
     const newMap = {};
     sortedLearners.value.forEach(l => {
@@ -106,6 +113,7 @@ export default function useAttendanceForm({ hasChanges, markClean, submitting, o
 
   function handleMarkAllChange(checked) {
     if (checked) {
+      pendingMarkAll.value = true;
       showMarkAllModal.value = true;
     } else {
       setAllLearners(false);
@@ -114,10 +122,12 @@ export default function useAttendanceForm({ hasChanges, markClean, submitting, o
 
   function confirmMarkAll() {
     setAllLearners(true);
+    pendingMarkAll.value = false;
     showMarkAllModal.value = false;
   }
 
   function cancelMarkAll() {
+    pendingMarkAll.value = false;
     showMarkAllModal.value = false;
   }
 
@@ -167,6 +177,7 @@ export default function useAttendanceForm({ hasChanges, markClean, submitting, o
     absentCount,
     currentAbsentCount,
     allPresent,
+    markAllPresent,
     showMarkAllModal,
     pendingRoute,
     isPresent,

kolibri/plugins/coach/frontend/views/attendance/AttendanceFormTable.vue

@@ -31,7 +31,7 @@
               <KSwitch
                 name="mark-all-present"
                 :ariaLabelledBy="'mark-all-present-label'"
-                :value="allPresent"
+                :value="markAllSwitchValue"
                 @change="handleMarkAllChange"
               />
             </div>
@@ -200,7 +200,7 @@
       const {
         sortedLearners,
         sortedPreviouslyEnrolled,
-        allPresent,
+        markAllPresent: markAllSwitchValue,
         presentCount: presentCountValue,
         absentCount: absentCountValue,
         currentAbsentCount: currentAbsentCountValue,
@@ -250,7 +250,7 @@
         confirmButtonStyles,
         allItems,
         sortedLearners,
-        allPresent,
+        markAllSwitchValue,
         presentCount: presentCountValue,
         absentCount: absentCountValue,
         currentAbsentCount: currentAbsentCountValue,

kolibri/plugins/coach/frontend/views/attendance/__tests__/AttendancePages.spec.js

@@ -300,6 +300,37 @@ describe('AttendanceNewPage', () => {
     expect(buttons.length).toBe(2);
   });
 
+  it('re-opens modal on a single click after "Go back" was clicked in the mark-all modal', async () => {
+    // Regression: after cancelling the modal, the KSwitch stayed visually "on" even though
+    // allPresent was false. The next click fired @change(false) instead of @change(true),
+    // so the modal never re-opened — requiring a second click to trigger it again.
+    renderNewPage();
+    await waitFor(() => {
+      expect(screen.getByText('Alice')).toBeInTheDocument();
+    });
+
+    // First click — opens modal
+    await fireEvent.click(getMarkAllSwitch());
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    // Click "Go back" inside the modal
+    await fireEvent.click(screen.getByRole('button', { name: 'Go back' }));
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    // Switch should be visually unchecked after cancellation
+    expect(getMarkAllSwitch().checked).toBe(false);
+
+    // Second click — should open the modal again in a single click
+    await fireEvent.click(getMarkAllSwitch());
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+  });
+
   it('marks all learners present after confirming modal', async () => {
     renderNewPage();
     await waitFor(() => {