Stimulus: change() event on <div> not processed

[gerdriesselmann]

Whenever I trigger a change-event on a div, this is not intercepted by Stimulus, as I would expect.

This holds for custom events, too.

It works for click() events, though.

On input elements, change() works like expected.

For me, it looks like Stimulus only connects with events that are somehow "native" to an element?

The HTML:

<div data-controller="test">
    <div
      data-target="test.trigger" 
      data-action="change->test#change click->test#click custom->test#custom"
    >
    </div>
    <button data-action="test#trigger">Trigger</button>
</div>

The test_controller.js (uses jQuery):

import { Controller } from "stimulus";

export default class extends Controller {
    static targets = ["trigger"];

    connect() {
        $(this.triggerTarget).change(function(e) {
            window.console.log("CHANGE jQuery");
        });
    }

    change(e) {
        window.console.log("CHANGE");
    }

    click(e) {
        window.console.log("CLICK");
    }

    custom(e) {
        window.console.log("CUSTOM");
    }

    trigger(e) {
        $(this.triggerTarget)
            .change()
            .click()
            .trigger("custom");
    }

}

Expected:

• Click on button
• Console log is CHANGE jQuery, CHANGE, CLICK, CUSTOM (in any order)

Got:

• Click on button
• Console log is CHANGE jQuery, CLICK

[lsylvester]

I think that stimulus is only listening to DOM events and not jQuery events. I am not sure why the click is working for you, maybe jQuery is triggering a DOM event because it is a native event for the element?

If you create the events using

var event = new CustomEvent('my-custom-event', {bubbles: true, cancelable: true});
someElement.dispatchEvent(event);

or (if you need to support IE)

var event = document.createEvent('Event');
event.initEvent('my-custom-event', true, true); //can bubble, and is cancellable
someElement.dispatchEvent(event);

then stimulus should detect these events.

[sstephenson]

@lsylvester is correct. jQuery custom events aren’t backed by actual DOM events, so Stimulus isn’t able to listen for them. You’ll need to use document.createEvent and Element#dispatchEvent instead of $.fn.trigger.

[tortuetorche]

Is it possible to create a layer of compatibility between jQuery custom events and DOM events?
In the core of Stimulus or maybe as a plugin?
Maybe someone already face-off this issue and wrote some code to fix it...
See https://github.com/jquery/jquery/issues/2476