Yeah, this is some strange handling by React. React won’t wire up certain events like change
automatically for controls that look like web components (which sp-radio-group
et al look like), which means that to listen for it properly you’ll need to wrap it (the WC
component in the samples works fine here).
For onInput
and onClick
, it does seem that React will wire up those events (I’m not sure why it makes an exception here), but as you’ve noticed, you get notifications for everything underneath, and further onClick
is being fired whenever you click anywhere in the sp-radio-group
(expected, since the user did click within its bounds).
It does appear that if you use evt.currentTarget.value
, you’ll see the correct value (even though the handler fires multiple times). If you’re just treating this as a controlled element, that may be fine. If you’re doing a lot of work each time the handler is called, that might be a problem.
In general, though, the most straightforward way to mix React & Spectrum UXP is to use a wrapper like WC
and handle the events there.