Input does not register spacebar key presses when inside RadioGroup

[benhonda]

The spacebar key-press gets interrupted by something in the RadioGroup component. The result is that I can't type a whitespace when my input is inside RadioGroup.

I was unable to diagnose what exactly is causing this issue but this got me wondering... is it bad practice to nest <input> inside <RadioGroup>?

As a hack-fix, I've added an onKeyDown event to my input:

<RadioGroup ...>
...
<input ... onKeyDown={(e) => (e.key == " " || e.code == "Space" || e.keyCode == 32) && e.stopPropagation()} />
...
</RadioGroup>

[gcaraciolo]

For vuejs

<RadioGroup ...>
...
<input ... @keydown.stop />
...
</RadioGroup>

[enzocomics]

I ran into this issue today with a Textarea that is revealed when a Radio inside a RadioGroup is selected. I'm also wondering if it's bad practice to do that. Pleased to report the hack-fix by @benhonda still works well, though. Thank you for that!