From 5f2e6d8c7441cb6be8c53add2435d56976ca58d3 Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Thu, 23 Apr 2026 18:57:43 +0200
Subject: [PATCH] fix(adjustments): rename Select-All header checkbox id to
 avoid collision
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Code-review follow-up on Task 6:

Task 4 gave the Adjustments table's 'select all' header checkbox the
id 'adjSelectAll' — but the Add-Adjustment modal already had an
<a id='adjSelectAll'> Select-All anchor (and a matching JS click
handler on line 1823). Duplicate IDs are invalid HTML, and
getElementById returns the first occurrence in DOM order — so the
modal's Select-All handler silently started binding to the table
checkbox instead of its intended anchor. Never reported because
neither element was automated-tested.

Rename the table checkbox id to #adjTableSelectAll and update Task 6's
bulk-select JS to match. The modal's handler now correctly binds to
its own anchor again.

62/62 tests still pass — behaviour is template-driven UI, no backend
change.
---
 core/templates/core/payroll_dashboard.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/core/templates/core/payroll_dashboard.html b/core/templates/core/payroll_dashboard.html
index 34ea07f..de30c76 100644
--- a/core/templates/core/payroll_dashboard.html
+++ b/core/templates/core/payroll_dashboard.html
@@ -777,7 +777,10 @@
                             <th style="width: 40px;">
                                 {# aria-label is the accessible name screen readers announce; #}
                                 {# title= is kept as the mouse-hover tooltip for sighted users. #}
-                                <input type="checkbox" class="form-check-input" id="adjSelectAll"
+                                {# Distinct id from the Add-Adjustment modal's own #adjSelectAll #}
+                                {# anchor (line ~940) — duplicate ids are invalid HTML and caused the #}
+                                {# modal's Select-All handler to silently bind to this checkbox instead. #}
+                                <input type="checkbox" class="form-check-input" id="adjTableSelectAll"
                                        aria-label="Select all unpaid adjustments on this page"
                                        title="Select all unpaid on this page">
                             </th>
@@ -3596,14 +3599,16 @@ document.addEventListener('DOMContentLoaded', function() {
         // === ADJUSTMENTS TAB — bulk select + delete ===
         // The per-row checkboxes come from _adjustment_row.html (class
         // .adj-bulk-checkbox on unpaid rows only; disabled dummy checkbox on
-        // paid rows for visual alignment). The header has an #adjSelectAll
-        // that toggles all visible unpaid checkboxes. A floating action bar
-        // (#adjBulkBar) appears when >=1 row is selected.
+        // paid rows for visual alignment). The header has #adjTableSelectAll
+        // (renamed from #adjSelectAll to avoid a duplicate-id collision with
+        // the Add-Adjustment modal's own Select-All anchor) that toggles all
+        // visible unpaid checkboxes. A floating action bar (#adjBulkBar)
+        // appears when >=1 row is selected.
         var bulkBar = document.getElementById('adjBulkBar');
         var bulkCount = document.getElementById('adjBulkCount');
         var bulkDeleteBtn = document.getElementById('adjBulkDeleteBtn');
         var bulkClearBtn = document.getElementById('adjBulkClearBtn');
-        var selectAll = document.getElementById('adjSelectAll');
+        var selectAll = document.getElementById('adjTableSelectAll');
 
         // CSRF via cookie — Django middleware sets this cookie on GET requests.
         function getCookie(name) {