Un-intuitive or buggy behavior around `<Radio>`
mzikherman opened this issue · comments
When using <Radio label="Select here for cats" onSelect=..., was noticing some interesting behavior.
Clicking the actual circular button fires the passed-in onSelect one time, w/ a correct value. However, clicking on the label fires the callback twice, once with a correct true selected value, and the second time with undefined.
This seems like a bug. However, there is a workaround! When using <RadioGroup onSelect=..., you still get the same behavior: namely, clicking the circular button will fire the callback once, but clicking the label fires it twice. However, the API for this onSelect just returns the name of the radio button that was selected, which is friendlier. Even though it fires twice, it returns the same value (vs true and then undefined), so isn't immediately obvious as a UI bug based on this value.
Overall, it does seem like there is a bug in <Radio> that will fire a callback twice (and w/ differing values) when clicking on a label, vs when clicking the circular button. Checking out that component, reveals that it's not an actual HTML radio input, but something much more custom- which is surprising! I would have expected something much simpler.
This issue is to call out that specific buggy behavior, clicking the label vs clicking the circle, and also to wonder/ask if <Radio> can't be simplified somehow.
Yeah, Radio is a bit complicated. That component has some complex visual states that aren't really possible to support in a native radio component.
Good catch on the bug though. 👍
Actually, this issue is sort of a blocker...using the RadioGroup doesn't seem to let someone de-select a radio button, which is a necessary part of the interaction I'm working on, and can't use Radio b/c of the double fire.
Any chance someone can help me take a look?
@mzikherman - I can take a look today.