Radio Button: Clicking on circle should select option

[timotheeg]

Issue: Clicking circles does not select options, only text selects

Expected behaviour (confirmed by @staceytan1998 ): You should be able to select the option by clicking on the circle or the text!

Issue possibly (likely?) also applies to checkboxes.

[jia1]

I can't reproduce this bug on any of my platforms.

What I did:

• Pulled develop branch (4a92e31).
• Ran the repo locally.
• Created a test form containing Radio and Checkbox.
• In the form builder, clicked the circle. Selection worked. Clicked the text, selection worked too.
• Submitted form by selecting with button for one option and selecting with text for the other option. Submission meets expectations.
• Repeat the above for Preview form and public form.
• Repeat the above for form.gov.sg (production). No problem.
• Repeat the above for form.gov.sg in my mobile phone (Android). No problem.

[timotheeg]

Thanks for checking this @jia1

I did a quick test and I similarly can no longer reproduce this issue.

I should have linked to the form that did give me the issue, so we could check if a combination of factors affects behaviour in that form specifically, and whether that has been fixed.

Since I didn't link to the form, I'm just going to close the issue, and we can open it again if the behaviour ever happens again.

[timotheeg]

K, I manage to repro after all!!

The bug manifests itself IF some text is selected on the page.

This seems to be a chakra bug, reported here, and it seems to be fixed in chakra 2, so we should ge the fix "for free" when we are ready to upgrade react+chakra.

[LoneRifle]

Issue still persists as of this day

[adriangohjw]

Unfortunately, Chakra 2 is not backward compatible with React 17 (Ref: https://v2.chakra-ui.com/getting-started/migration), and the upgrade from React 17 to 18 itself causes more potential breaking changes