From afba2aeba8ca7bbdca4d0baebc4975b96c862a48 Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <ashoaib540918@gmail.com>
Date: Mon, 14 Oct 2024 22:06:09 +0530
Subject: [PATCH] Fix Visual Picker Checkbox doesn't work in Firefox when
 checkbox is clicked on directly (#4102)

* fix(visual-picker): fix checkbox click

* fix(visual-picker): add changeset

* Update modern-starfishes-matter.md
---
 .changeset/modern-starfishes-matter.md                      | 6 ++++++
 .../components/visual-picker/src/VisualPickerCheckbox.tsx   | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-starfishes-matter.md

diff --git a/.changeset/modern-starfishes-matter.md b/.changeset/modern-starfishes-matter.md
new file mode 100644
index 0000000000..c9ae55b1af
--- /dev/null
+++ b/.changeset/modern-starfishes-matter.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/visual-picker": patch
+"@twilio-paste/core": patch
+---
+
+[Visual Picker]: Fix Visual Picker checkbox doesn't work in firefox when checkbox is clicked on directly
diff --git a/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx b/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
index c97420f1d0..cc162f5408 100644
--- a/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
+++ b/packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
@@ -115,7 +115,7 @@ export const VisualPickerCheckbox = React.forwardRef<HTMLInputElement, VisualPic
         <BaseRadioCheckboxLabel disabled={disabled} htmlFor={checkboxId} id={labelId}>
           <ScreenReaderOnly>{labelText}</ScreenReaderOnly>
           <BaseRadioCheckboxControl
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => e.preventDefault()}
             borderRadius="borderRadius20"
             element={`${element}_CONTROL`}
             disabled={disabled}