nathanvda / cocoon

Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms
http://github.com/nathanvda/cocoon
MIT License
3.08k stars 383 forks source link

element.dispatchEvent(new Event(event)) doesn't work #629

Open r3tr0sp3c opened 1 year ago

r3tr0sp3c commented 1 year ago

Here's a simple example:

document.getElementById("input-field1").addEventListener("cocoon:after-insert", () => {
      document.getElementById("input-field2").dispatchEvent(new Event("input"));
    })

The dispatchEvent doesn't work on any cocoon callback.

A workaround is to place the dispatchEvent inside a setTimeout function

document.getElementById("input-field1").addEventListener("cocoon:after-insert", () => {
  setTimeout(() => {
        document.getElementById("input-field2").dispatchEvent(new Event("input"))
      }, "5");
})

Not sure if that's an expected behavior or a bug.

nathanvda commented 1 year ago

The original javascript uses jquery to dispatch and handle events, so imho that is not compatible, but probably you are not using the "original" javascript (there is a version using "plain" javascript).

So assuming you are using that version, the events are ment to be handled on a container level, they will not be dispatched on any single input-field inside the form.