Input type="radio" seems to need both onClick and onChange

Adobe XD UXP Plugin API
1

In a panel, I have the radio pair below, and if I don’t use both onChange and onClick, things won’t work.

If I omit onClick, the radio buttons actually change appearance but the onClick routine isn’t getting called unless I click on the label itself, not the radio button.

Pretty confusing. Do others have any experience with this?

    <label>
      <input
        className="show-selection"
        type="radio"
        id="selection"
        name="root"
        onChange={this.onShowSelection}
        onClick={this.onShowSelection}
        checked={!this.state.showRoot}
      />
      Selection
    </label>
    <label>
      <input
        className="show-root"
        type="radio"
        id="root"
        name="root"
        onChange={this.onShowRoot}
        onClick={this.onShowRoot}
        checked={this.state.showRoot}
      />
      Root
    </label>
2

I can’t test your code right now.

This is the code for my radio buttons using onchange() only:

var weekStartRBGroup = document.createElement("div");
weekStartRBGroup.style.display = "flex";
weekStartRBGroup.style.flexWrap = "wrap";
weekModule.appendChild(weekStartRBGroup);
var weekStartMondayRB = createRadioButton("weekStart", "Monday", "", true);
weekStartMondayRB.style.marginRight = 40;
weekStartMondayRB.firstChild.value = "monday";
weekStartMondayRB.firstChild.onchange = (e) => setWeekStart("monday");
weekStartRBGroup.appendChild(weekStartMondayRB);
var weekStartSundayRB = createRadioButton("weekStart", "Sunday", "", false);
weekStartSundayRB.firstChild.value = "sunday";
weekStartSundayRB.firstChild.onchange = (e) => setWeekStart("sunday");
weekStartRBGroup.appendChild(weekStartSundayRB);

these the helpers:

function createRadioButton(_group, _text, _width, _checked)
{
    let newRadioButton = document.createElement("label");
	newRadioButton.style.display = "flex";
	newRadioButton.style.flexDirection = "row";
	newRadioButton.style.alignItems = "center";
	let radioButton = document.createElement("input");
	radioButton.name = _group;
	radioButton.type = "radio";
	if (_checked)
	{
        radioButton.checked = true;
    }
	newRadioButton.appendChild(radioButton);
	let radioButtonLabel = createLabel(_text);
	radioButtonLabel.style.marginLeft = 6;
	radioButtonLabel.style.width = _width;
    newRadioButton.appendChild(radioButtonLabel);
    return newRadioButton;
}

function createLabel(_text)
{
let newLabel = document.createElement("div");
newLabel.style.textAlign = "left";
newLabel.style.fontSize = labelFontSize;
newLabel.textContent = _text;
return newLabel;
}