From 2e15c6120a2c677497a2cccbbf675e81172a53c7 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Wed, 15 Jul 2026 08:32:39 -0400
Subject: [PATCH] CASH-2815 | Pass clicks on the component through to the
 checkbox

---
 .../waitlist-question.spec.js                 | 39 +++++++++++++++++++
 .../waitlist-question/waitlist-question.vue   | 13 ++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/layouts/scheduling/waitlist-question/waitlist-question.spec.js b/src/layouts/scheduling/waitlist-question/waitlist-question.spec.js
index e3bcc3e07..83582df3a 100644
--- a/src/layouts/scheduling/waitlist-question/waitlist-question.spec.js
+++ b/src/layouts/scheduling/waitlist-question/waitlist-question.spec.js
@@ -105,6 +105,45 @@ describe("waitlist-question.vue", () => {
         expect(wrapper.find("input[type='checkbox']").exists()).toBe(false);
     });
 
+    describe("clicking the container", () => {
+        it("toggles localValue to true when clicking outside the checkbox", async () => {
+            const wrapper = mountComponent({ modelValue: false });
+
+            await wrapper.find(".waitlist-label").trigger("click");
+
+            expect(wrapper.emitted("update:modelValue")).toEqual([[true]]);
+        });
+
+        it("toggles localValue to false when clicking outside the checkbox", async () => {
+            const wrapper = mountComponent({ modelValue: true });
+
+            await wrapper.find(".waitlist-question").trigger("click");
+
+            expect(wrapper.emitted("update:modelValue")).toEqual([[false]]);
+        });
+
+        it("does not toggle when the click target is the checkbox input itself", () => {
+            // jsdom doesn't reliably run a checkbox's native activation behavior
+            // (toggling + firing "change") for script-dispatched clicks, so this
+            // calls the handler directly with the real input element as the
+            // event target to verify the guard is skipped in that case.
+            const wrapper = mountComponent({ modelValue: false });
+            const inputElement = wrapper.find("input[type='checkbox']").element;
+
+            wrapper.vm.handleContainerClick({ target: inputElement });
+
+            expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+        });
+
+        it("does not toggle when the click lands inside the checkbox wrapper but not on the input", async () => {
+            const wrapper = mountComponent({ modelValue: false });
+
+            await wrapper.find(".ui-checkbox").trigger("click");
+
+            expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+        });
+    });
+
     describe("shouldDisplay", () => {
         it("is false when the DISPLAY_WAITLIST experiment is off", () => {
             store.getters.applicationUser.experiments = [
diff --git a/src/layouts/scheduling/waitlist-question/waitlist-question.vue b/src/layouts/scheduling/waitlist-question/waitlist-question.vue
index aba80f23b..61c54dd86 100644
--- a/src/layouts/scheduling/waitlist-question/waitlist-question.vue
+++ b/src/layouts/scheduling/waitlist-question/waitlist-question.vue
@@ -1,6 +1,9 @@
 <template>
     <template v-if="shouldDisplay">
-        <div class="waitlist-question bg-light rounded" v-bind="$attrs">
+        <div
+            class="waitlist-question bg-light rounded"
+            v-bind="$attrs"
+            @click="handleContainerClick">
             <textBlock
                 cmsWidgetName="WaitListLabelWidget"
                 typeStyle="medium"
@@ -81,6 +84,14 @@ export default {
             );
         },
     },
+    methods: {
+        handleContainerClick(event) {
+            // The checkbox's own label/input already toggles localValue natively,
+            // so ignore clicks that originate inside it to avoid double-toggling.
+            if (event.target.closest(".ui-checkbox")) return;
+            this.localValue = !this.localValue;
+        },
+    },
     components: {
         textBlock,
         checkboxQuestion,