Visual Picker Checkbox doesn't work in Firefox when checkbox is clicked on directly

[dangmai]

Description

In Firefox, when I click directly on a checkbox inside a Visual Picker, the selection doesn't change. The selection does change if I click on the box surrounding the checkbox.

Link to Reproduction

n/a since this is reproducible directly on Paste website

Steps to reproduce

1. Go to https://paste.twilio.design/components/visual-picker#vertical-checkbox in Firefox
2. Click on any checkbox in the Visual Picker.
3. Notice that no selection is made.

Paste Core Version

20.2.0

Browser

Firefox 125.0.3

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[dosubot]

The issue with the Visual Picker Checkbox not working in Firefox when clicked directly seems to stem from how Firefox handles click events on hidden input elements differently than other browsers. This discrepancy affects the VisualPickerCheckbox component in the Paste design system, particularly due to the specific event handling logic implemented for the checkbox and its surrounding box.

In the Paste design system, clicking on the surrounding box of the checkbox triggers a programmatic click on the checkbox itself, which should toggle its state. However, when clicking directly on the checkbox, Firefox's handling of the event on the hidden input element prevents the expected change in state. This is because the event propagation is stopped by the BaseRadioCheckboxControl component's onClick handler, which represents the checkbox visually.

To address this issue, the event handling logic within the VisualPickerCheckbox component may need to be adjusted. Ensuring that the click event on the checkbox icon properly triggers a change in the checkbox's checked state, even in Firefox, could involve directly toggling the state in the event handler or making sure the hidden checkbox receives the click event in a way that Firefox can handle correctly.

The relevant code can be found in the VisualPickerCheckbox.tsx file in the Paste repository. Adjusting this logic should help achieve consistent behavior across browsers, including Firefox.

Details

Sources

• packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx
• packages/paste-core/components/disclosure/type-docs.json
• packages/paste-core/components/callout/type-docs.json
• packages/paste-core/components/form/type-docs.json
• packages/paste-core/components/summary-detail/type-docs.json
• packages/paste-core/components/product-switcher/type-docs.json
• packages/paste-core/components/visual-picker/tests/checkbox.spec.tsx
• packages/paste-website/src/components/BrowserSupport.tsx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[nkrantz]

Hey @dangmai - thanks for reporting this! I've added a ticket to our backlog to address the bug. We'll let you know here once it's fixed.