Radio buttons come out of sync with vdom

[nicknisi]

Bug

It's very easy for radio buttons to become out of sync with the vdom, as the actual checked value of the underlying DOM node is changed by user input, even if the checked property in the vdom is hard-coded.

Package Version: 5.x

Code

class App extends WidgetBase {
  protected render() {
    return (
      <div>
        <label>
          ON
          <input type="radio" name="toggle" checked={false} />
        </label>
        <label>
          OFF
          <input type="radio" name="toggle" checked={true} />
        </label>
      </div>
    );
  }
}

CodeSandbox: https://codesandbox.io/s/yv7nz1q3p1

Expected behavior:

I would expect the value of the radio buttons to not change based on user interaction. Rather, they should only be changed by actually changing the value of the checked property. See this React example.

Actual behavior:

Even though the checked values are hard-coded, the user can still change which of the radio buttons is checked.

[nicknisi]

Based on discussion, this could require special handling of radio buttons in the vdom since they are a unique case, spanning multiple elements.