The change event does not work properly

[shadikhani]

The change event for setting the Value change does not work. for example, the code below does not work:

    <h3>Value change event</h3>
    <vaadin-demo-snippet id="value-change-event" when-defined="vaadin-radio-button">
      <template preserve-content>
        <vaadin-radio-group label="Label" theme="vertical">
          <vaadin-radio-button value="one">Option one</vaadin-radio-button>
          <vaadin-radio-button value="two">Option two</vaadin-radio-button>
          <vaadin-radio-button value="three">Option three</vaadin-radio-button>
        </vaadin-radio-group>
        <div id="output">Selected value:</div>
        <script>
          window.addDemoReadyListener('#value-change-event', function(document) {
            const radioButtonGroup = document.querySelector('vaadin-radio-group');
            const output = document.querySelector('#output');
            radioButtonGroup.addEventListener('change', function(event) {
              output.textContent = radioButtonGroup.value;
            });
          });
        </script>
      </template>
    </vaadin-demo-snippet>

[tomivirkki]

Seems that a "change" event is dispatched properly when the radio group value is changed with arrow keys but not when one of the radios is clicked.