Multi event actions

Hey,

In one of my apps I had a problem that I needed few events to trigger the same input action. It looked like paste->changeThings input->changeThings.

I think it would be nice to have a map between multiple events and an action like paste,input->changeThings.

Would this make sense as an addition to stimulus?

[rik]

I couldn’t find any mention in the docs on how to allow for multiple actions, but actually you can just space them.

https://stimulus.hotwired.dev/reference/actions#multiple-actions

---

I don’t think the complexity of implementing multi event-type in the framework and explaining the new syntax in the docs is worth the value for the few times when you need to listen to several event types with the same action.

In the three examples given, it seems to me that using the default event type for input elements (aka input) would probably cover all cases (paste, change, keyup, blur and focus).

[frayzil]

Hey @dvisockas @stillhart @kieraneglin

If you’re still interested in a solution, there are two ways to achieve it. The core idea is to mix the events create a custom event and dispatch it to the element.

Method 1: Use a helper to mix events in the controller

https://jsfiddle.net/frayzil/1ebfmgk7/8/

The HTML

<div data-controller="test">

  <input
    data-action="input,focus,blur->test#test"
    data-test-target="one">

  <input
    data-action="input,focus->test#test"
    data-test-target="two">

  <p data-test-target="output"></p>
</div>

The Controller

// controllers/test_controller.js
import mixEvents from 'helpers/mix_events'

export default class extends Controller {

  static targets = [ "one", "two", "output" ]

  connect() {
    mixEvents(this.oneTarget, ["input", "focus", "blur"])
    mixEvents(this.twoTarget, ["input", "focus"])
  }

  test() { ... }

}

The Helper

// helpers/mix_events.js
export const mixEvents = element, ingredients => {
  const mixedEvent = new Event(ingredients.join(','))

  ingredients.forEach(listenAndDispatch)

  function listenAndDispatch(ingredient) {
    element.addEventListener(ingredient, dispatchMixedEvent)
  }

  function dispatchMixedEvent(event) {
    event.target.dispatchEvent(mixedEvent)
  }

}

2. Use a controller to mix events in the HTML

https://jsfiddle.net/frayzil/1ebfmgk7/13/

The HTML

<div data-controller="test">

  <input
    data-controller="events-mixer"
    data-events-mixer-ingredients-value="input,focus,blur"
    
    data-action="input,focus,blur->test#test"
    data-test-target="one">

  <input
    data-controller="events-mixer"
    data-events-mixer-ingredients-value="input,focus"
    
    data-action="input,focus->test#test"
    data-test-target="two">

  <p data-test-target="output"></p>
</div>

The EventsMixerController

export default class extends Controller {

  static values = {
    ingredients: String
  }

  connect() {
    // using the helper defined in the previous method
    mixEvents(this.element, this.ingredientsValue.split(','))
  }

}