CASH-2815 | Pass clicks on the component through to the checkbox

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 = [

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,