Stimulus: Change event on radio button going on->off

[paulozoom]

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?

[ngan]

1. This is how the native DOM behaves.
2. Stimulus core member can answer...
3. I would probably move the controller up a level so that it monitors all of your radio buttons (of the same name). Then each radio button can be a target for you to easily access to find which one Is selected.

To get the element that triggers the event, use this.element in your controller. This is clearly stated in the handbook. EDIT: I misunderstood the question, see https://github.com/stimulusjs/stimulus/issues/146#issuecomment-380490637 for correct answer.

[paulozoom]

Thanks @ngan. I must've missed the this.element. I find it hard to find stuff in the Handbook as it's written tutorial-style, and not as an API reference.

I'll wait for an answer from a core team member about the idea.

[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/

[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.)