Parent controllers is listening to actions within child controllers

I have asked in https://discourse.stimulusjs.org/t/is-it-intentional-that-parent-controllers-also-listens-to-actions-within-child-controller/1127 and told to file a bug report here.

---

Hi 👋,

Using example from https://stimulusjs.org/reference/actions#global-events, let say I have the following controllers nested like below:

<div data-controller="gallery">
  <div data-controller="gallery"
       data-action="resize@window->gallery#layout">
    …
  </div>
</div>

I found out that the parent gallery controller is also listening to the child action. The example above will fires gallery#layout twice when the window is resized.

Here is another example in https://codepen.io/javan/pen/JjYMYKO?editors=1010, thanks to @javan 👍 .

FYI, I’m using Stimulus 1.1.1.

[adrienpoly]

@javan I think this issue is partially corrected and should be reopened. I have been using custom events to communicate between controllers and I think I encountered another version of this issue

Here is a codepen to demonstrate https://codepen.io/adrienpoly/pen/gOwGpvL?editors=1011

clicking on level 1 is expected to only triggers the animate#fadeIn function in the inner controller but it does also triggers the outer controller 😢.

HTML

<div data-controller="animate" id="outer">
   <button data-controller="event" data-action="event#dispatch">
      Dispatch event from inner level - 1
    </button>
   <div data-controller="animate" data-action="fadeIn@window->animate#fadeIn" id="inner">
     <div>hello</div>
     <button data-controller="event" data-action="event#dispatch">
      Dispatch event from inner level - 2
    </button>
  </div>
</div>

<button data-controller="event" data-action="event#dispatch">
  Dispatch event from outer
</button>

JS

const { Application, Controller } = Stimulus
const application = Application.start()

application.register("animate", class extends Controller {
  
  fadeIn(event) {
    console.log(`[${event.type}] ${this.identifier}#fadeIn, id: ${this.element.id}`)
  }
})

application.register("event", class extends Controller {
  dispatch(event) {
    const customEvent = new CustomEvent("fadeIn", {bubbles: true, cancelable: true})
    this.element.dispatchEvent(customEvent)
  }
})

[adrienpoly]

I think this is a failing test

diff --git a/packages/@stimulus/core/src/tests/modules/action_tests.ts b/packages/@stimulus/core/src/tests/modules/action_tests.ts
index 36c66ba..ea7729a 100644
--- a/packages/@stimulus/core/src/tests/modules/action_tests.ts
+++ b/packages/@stimulus/core/src/tests/modules/action_tests.ts
@@ -6,6 +6,7 @@ export default class ActionTests extends LogControllerTestCase {
     <div data-controller="c" data-action="keydown@window->c#log">
       <button data-action="c#log"><span>Log</span></button>
       <div id="outer" data-action="click->c#log">
+        <div id="outer-button"></div>
         <div id="inner" data-controller="c" data-action="click->c#log keyup@window->c#log"></div>
       </div>
       <div id="multiple" data-action="click->c#log click->c#log2 mousedown->c#log"></div>
@@ -51,6 +52,12 @@ export default class ActionTests extends LogControllerTestCase {
     this.assertActions({ controller: innerController, eventType: "keyup" })
   }
 
+  async "test nested global actions emitted from outer controller"() {
+    const innerController = this.controllers[1]
+    await this.triggerEvent("#outer-button", "keyup")
+    this.assertActions({ controller: innerController, eventType: "keyup" })
+  }
+