From ec22434a7a942dcabc92e02abc66d550eec27f6a Mon Sep 17 00:00:00 2001
From: Joe Armani <93854858+JoeArmani@users.noreply.github.com>
Date: Fri, 7 Jun 2024 09:19:52 -0400
Subject: [PATCH] handle checkbox (multi-selection) grid CSS and logic (#442)

---
 ActiveLogic.css  | 5 +++++
 Default.css      | 5 +++++
 questionnaire.js | 8 ++++----
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ActiveLogic.css b/ActiveLogic.css
index cdf76da..41e43c0 100644
--- a/ActiveLogic.css
+++ b/ActiveLogic.css
@@ -204,6 +204,7 @@ for bootstrap -xs
   font-size: clamp(12px, 1.5vw, 16px);
 }
 
+.quest-grid.table-layout input[type="checkbox"],
 .quest-grid.table-layout input[type="radio"] {
   position: absolute;
   opacity: 0;
@@ -241,6 +242,7 @@ for bootstrap -xs
   background-color: transparent;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
   content: '';
   display: block;
@@ -265,6 +267,7 @@ for bootstrap -xs
   box-shadow: 0 0 .75vw #b3b3b3;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label {
   border: none;
   background-color: transparent;
@@ -345,6 +348,7 @@ for bootstrap -xs
     color: #333;
   }
 
+  .quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
   .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
     display: none;
   }
@@ -353,6 +357,7 @@ for bootstrap -xs
     display: none;
   }
 
+  .quest-grid.table-layout td input[type="checkbox"]:checked + .custom-label,
   .quest-grid.table-layout td input[type="radio"]:checked + .custom-label {
     position: absolute;
     top: 0;
diff --git a/Default.css b/Default.css
index 6dbfc6e..18bf094 100644
--- a/Default.css
+++ b/Default.css
@@ -138,6 +138,7 @@ for bootstrap -xs
   font-size: clamp(12px, 1.5vw, 16px);
 }
 
+.quest-grid.table-layout input[type="checkbox"],
 .quest-grid.table-layout input[type="radio"] {
   position: absolute;
   opacity: 0;
@@ -175,6 +176,7 @@ for bootstrap -xs
   background-color: transparent;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
   content: '';
   display: block;
@@ -199,6 +201,7 @@ for bootstrap -xs
   box-shadow: 0 0 .75vw #b3b3b3;
 }
 
+.quest-grid.table-layout input[type="checkbox"]:checked + .custom-label,
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label {
   border: none;
   background-color: transparent;
@@ -279,6 +282,7 @@ for bootstrap -xs
     color: #333;
   }
 
+  .quest-grid.table-layout input[type="checkbox"]:checked + .custom-label::after,
   .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
     display: none;
   }
@@ -287,6 +291,7 @@ for bootstrap -xs
     display: none;
   }
 
+  .quest-grid.table-layout td input[type="checkbox"]:checked + .custom-label,
   .quest-grid.table-layout td input[type="radio"]:checked + .custom-label {
     position: absolute;
     top: 0;
diff --git a/questionnaire.js b/questionnaire.js
index 33d93a3..4222b5b 100644
--- a/questionnaire.js
+++ b/questionnaire.js
@@ -1205,8 +1205,8 @@ export function displayQuestion(nextElement) {
 
   questionQueue.ptree();
 
-  // manage the question-specific listeners
-  refreshListeners(nextElement);
+  // manage the question-specific listeners in a live environment (skip in the renderer)
+  if (moduleParams.renderObj?.activate) refreshListeners(nextElement);
   return nextElement;
 }
 
@@ -1467,7 +1467,7 @@ export function gridHasAllAnswers(questionFieldset) {
     if (current.style.display=='none') return acc // skip hidden rows
 
     let name = current.dataset.questionId
-    let currentResponses = Array.from(current.parentElement.querySelectorAll(`input[type="radio"][name="${name}"]`))
+    let currentResponses = Array.from(current.parentElement.querySelectorAll(`input[type="radio"][name="${name}"], input[type="checkbox"][name="${name}"]`))
     return acc && currentResponses.some(checked)
   },true)
 }
@@ -1479,7 +1479,7 @@ export function numberOfUnansweredGridQuestions(questionFieldset) {
     if (current.style.display=='none') return acc // skip hidden rows
 
     let name = current.dataset.questionId
-    let currentResponses = Array.from(current.querySelectorAll(`input[type="radio"][name="${name}"]`));
+    let currentResponses = Array.from(current.querySelectorAll(`input[type="radio"][name="${name}"], input[type="checkbox"][name="${name}"]`));
     return currentResponses.some(checked)?acc:(acc+1)
   },0)
 }