One of two actions on same element not being called

2

Tricky one! removable#remove removes the element, which in turn uninstalls all of the actions. So, addable#boxRemoved never gets called.

Here a couple ideas:

1 - Dispatch a custom event before removing the element and add an action for that event:

class RemovableController extends Stimulus.Controller {
  remove() {
    const event = new CustomEvent("box:remove", { bubbles: true })
    this.element.dispatchEvent(event)
    this.element.parentNode.removeChild(this.element)
  }
}

<div data-controller="addable" data-action="box:remove->addable#boxRemoved">
  …
</div>

2 - Defer removing the element, allowing addable#boxRemoved to be invoked before it’s removed:

class RemovableController extends Stimulus.Controller {
  remove() {
    setTimeout(() => {
      this.element.parentNode.removeChild(this.element)
    }, 1)
  }
}
1 Like