Change event on radio button going on->off

Hi there,

I’m implementing a classic radio-button-reveals-text-field interaction, as used in questionnaires to add more details when a user checks a specific radio button.

<label>
  <input type="radio" name="tk" value="yes" data-action="checkreveal#reveal" />
  Yes
</label>
<label>
  <input type="radio" name="tk" value="no" />
  No
</label>
<input type="text" data-target="checkreveal.revealable" placeholder="Enter more details…" />

However, it seems that change is only triggered when the input in case is checked, not when it becomes unchecked as a result of another input in the radio group being checked.

1. Is this intended behaviour?
2. If so, would you think it’s a good idea to add an additional event that triggers in both cases?
3. There seems to be no way to access the DOM element who triggers an event (e.g. to see if it’s checked or not) without also making it a target. Is that so?

[sstephenson]

Just wanted to clarify a couple of points, for posterity:

In a controller, this.element always refers to the controller element (the element with the data-controller attribute).

The first argument to an action method is the DOM event object. In an action method, you can use event.target to access the element which triggered the event, and event.currentTarget to access the element with the data-action attribute. (Sometimes those are the same element, sometimes not.)

[javan]

This is how the native DOM behaves.

That’s correct. There is no native change event when deselecting a radio input. You could put your checkreveal#reveal action on both inputs. Or, maybe just use a checkbox if you only need on/off states.

In the future, please post questions like these in our community forum: https://discourse.stimulusjs.org/