fix: preventing double clicks for the checkboxes

[lloydaf]

What:

​This PR intends to fix an issue with checkboxes, where two clicks are registered instead of one
Why:

​This was causing weird behavior with Google Tag Manager data capturing, and so I decided to investigate. The issue seems to be because of a click being registered on the inner Text component
How:

​Prevent the event from being propogated in order to fix this issue
Media:

https://www.loom.com/share/05dffc1f667d435b9bfdbba4c3dd1ee7
Checklist:

• Ready to be merged
  

[snapsnapturtle]

Thanks for contributing. I could think of a few scenarios, which we need to make sure to still work.

• Checking/Unchecking the checkbox with your keyboard only
• In tests, query by the label, aka. the text, and click on it to trigger the checkbox to change (we should just write a simple test for this in the unit tests of this component)

[lloydaf]

@snapsnapturtle looks like the keyboard interactions still work: https://www.loom.com/share/65c1d685b4eb4f768a6724f0d6ac3c75

I'll add a test and update this PR done!

[nlopin]

Can you describe what was the issue you had?

It is expected that the click event bubbles up. I'd prefer not to break the default behavior

[lloydaf]

Sure. So the issue was that we were registering two clicks when we clicked on checkboxes, one for the span element that housed the label, and one for the input [type=checkbox] element which is the one we expect to click.

If there is a usecase for emitting click on the label, then I suppose we needn't prevent it from bubbling up, but in my opinion because this is a checkbox, this should be the default behavior (we want only one click when we click on a checkbox, even on its label, instead of two, because its supposed to be one cohesive unit that works as an input element).

[duranmla]

I think this totally makes sense and it is related to #23 isn't?
I guess what we are currently missing is a "focus" state

[lloydaf]

You can technically check it using your keyboard (like I showed in the video above), but its tricky

[duranmla]

Why is tricky @lloydaf ? cause we don't have the focus or because you have to press multiple times the keyboard?

[lloydaf]

It's tricky because there's no square box around the checkbox, and so you have to guess if your tab is at the right position. I don't know if that's the focus issue you're talking about but you can verify what I am saying from the video above, no outline when we reach the checkpoint anchors

[github-actions]

🎉 This PR is included in version 1.4.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀