Newly inserted elements can't call previously instantiated controller methods

[simmerz]

I have a hello controller:

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  say() {
    console.log('I exist!')
  }
}

And an existence controller (because I don't have a TurboStream event to hook on to):

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  connect() {
    this.dispatch('added')
  }

  remove() {
    this.dispatch('removed')
    this.element.remove()
  }
}

If I have html like this:

<div data-controller="hello">
  <div id="replaceme">I'm about to be replaced by a turbo stream</div>
</div>

And I replace replaceme with:

<div data-controller="existence" data-action="existence:added->hello#say">
I've been replaced
</div>

Nothing gets placed on the console. If I include hello as follows:

<div data-controller="hello existence" data-action="existence:added->hello#say">
I've been replaced
</div>

then the hello controller gets instantiated when the element is rendered and it works fine.

[KonnorRogers]

I dont see you ever add the hello controller anywhere in the tree.

Is the problem perhaps that class="hello" should be data-controller="hello" ?

- <div class="hello">
+ <div data-controller="hello">
  <div id="replaceme">I'm about to be replaced by a turbo stream</div>
</div>

[simmerz]

Oops, that's what happens when you retype it. It was in as data-controller="hello". Updated to show that corrected. The error does still occur. The only workaround I can find is to instantiate the hello controller on the newly inserted element.

[KonnorRogers]

Reproduction here:

https://codepen.io/paramagicdev/pen/oggVMar?editors=1000

Definitely seems to be a timing issue because wrapping connect in a timeout makes it work as expected.

"setTimeout" fix:

https://codepen.io/paramagicdev/pen/vEEPzOG?editors=1000

[simmerz]

Perhaps new controllers are instantiated before existing controller listeners in the newly injected elements are processed?

Confirmed that setTimeout "fixes" it.

[KonnorRogers]

Perhaps new controllers are instantiated before existing controller listeners in the newly injected elements are processed?

Confirmed that setTimeout "fixes" it.

Thats what it seems like. It seems the controller fires it's connect() function before it has attached its event listeners from data-action.

Further reduced reproduction without turbo streams and just using el.replaceWith(node)

https://codepen.io/paramagicdev/pen/WbbmgQd?editors=1000