Closed mzikherman closed 5 years ago
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.
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 correcttrue
selected value, and the second time withundefined
.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 thisonSelect
just returns the name of the radio button that was selected, which is friendlier. Even though it fires twice, it returns the same value (vstrue
and thenundefined
), 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.