scale-radio-button: missing scaleChange events for clicks in between button and label

[hmtelbi]

Scale Version
3.0.0-beta.137

Framework and version
Vue 3, but the same issue was also observed by another team, that uses React.
We are using the web components directly and not the Vue component wrappers.

Current Behavior
If you click on the space between the button and the label, then the radio button is set to "checked", but there is no "scaleChange" event emitted.

An end user sometimes accidentally hits this location and so from their perspective it seems that the application is unreliable, because sometimes it works and sometimes it does not.
But the bug is 100% reproducible when you specifically click in between the button and the label.

The bug behaviour is also consistent across the major browsers (Chrome, Safari, Edge & Firefox).

Expected Behavior
A "scaleChange" event is emitted, just like when you click directly on the button or the label.

Additional context
I had a look at the source code of this component.
There is a wrapping div element, which contains the input and the label elements.
Both the label and the wrapping element have a click listener and the input element has a change event listener.
The click listener only programmatically sets the "checked" property and unchecks all sibling radio buttons:

  // Prevent click event being fired twice when the target is the label.
  handleClick = (event: any) => {
    event.stopPropagation();
    if (!this.disabled) {
      this.checked = true;
      this.uncheckSiblings();
    }
  };

... while the change listener also emits the "scaleChange" event:

  handleCheckedChange = (event: any) => {
    if (!this.disabled) {
      this.checked = event.target.checked;
      // I don't think this is ever going to be `false` but well...
      if (this.checked) {
        this.uncheckSiblings();
      }
      emitEvent(this, 'scaleChange', {
        value: this.value == null ? this.value : this.value.toString(),
      });
    }
  };

If the user clicks directly on the button or the label, the browser emits both a click and a change event.
So in this case, the "scaleChange" event is emitted by the change event handler.

But if the user clicks instead in between those two elements, then only the click listener of the enclosing div element triggers.
This sets the "checked" property of the component, but does not emit the "scaleChange" event.

I hope this helps to fix the issue.

[georgwittberger-telekom-mms]

This sounds very similar to this issue: #1766

It is claimed to be fixed there. But since you are using the latest version there could still be a problem or it is a regression.

[hmtelbi]

Yes, the issue seems to describe the same bug.
From what I can see in the related PR, only one part of the issue was fixed (radio button could be toggled in the disabled state).
But the issue about missing events in the enabled state is still open.

[hmtelbi]

Apparently the issue was fixed in version 3.0.0-beta.141 and higher (#2123)