Changed callbacks can fire before connect

[ianterrell]

I have a situation where I want polymorphic outlets, and I've solved it by having "bridging" controllers so that I can reference a homogeneous collection of outlets, where each member of that collection can reference another specific controller. I do it by setting a controller value on the bridging controller from the non-homogenous bridged controller.

In some circumstances I notice that the controllerValueChanged callback occurs before the bridging controller's connect is executed.

Bridging controller:

import { Controller } from "@hotwired/stimulus"

let xid = 0
export default class extends Controller {
  static values = {
    controller: String,
  }

  connect() {
    this.id = xid++
    console.log("ExtensionBridgeController#connect", this.id)
  }

  controllerValueChanged() {
    console.log("ExtensionBridgeController#controllerValueChanged", this.id, this.controllerValue)
  }
}

Bridged controller base class:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.setAttribute('data-ui--admin--wysiwyg--extension-bridge-controller-value', this.identifier)
  }
}

Observed order of operations:

For context, ultimately I do something like this in the controllerValueChanged:

this._bridgedController = this.application.getControllerForElementAndIdentifier(this.element, this.controllerValue)

But it's now growing more complex managing the synchronization of everything. I think my approach can use some work generally, and I'd love to see #628 or other approach fleshed out, but I think this may be a bug regardless.

• related to https://github.com/hotwired/stimulus/issues/628
• related to https://github.com/hotwired/stimulus/issues/490

[brunoprietog]

Hi, as mentioned in #490, invoking that callback after initializing the controller and before the controller is connected is the expected behavior. Maybe you could stop the method execution if the element is not connected with something like:

if (!this.element.isConnected) return

[ianterrell]

Thank you, I misread and misinterpreted the commentary on #490. I had been erroneously conceptualizing connect() as a constructor and conflated it with initialization.