<sp-radio-group> React issues – onChange vs. onInput vs. onClick

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.

2 Likes