disconnect() not called if outlet is accessed in connect() #763

sebastianludwig · 2024-04-21T17:07:21Z

I noticed that accessing an outlet in connect() causes the reference count of that controller to be 2 instead of 1 after start has finished. That means all actions which under normal circumstances cause the controller to be disconnected (like removing the data-controller attribute) don't cause the disconnect anymore.

The following code snippet illustrates the problem

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script type="module">
    import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
    window.Stimulus = Application.start()

    Stimulus.register("child", class extends Controller {
      connect() {
        console.log("Child connected")
      }
      disconnect() {
        console.log("Child disconnected")
        alert("works as expected")
      }
    })

    Stimulus.register("parent", class extends Controller {
      static outlets = [ "child" ]
  
      connect() {
        console.log("Parent connected")
        console.log(this.childOutlet) // <- works without this line 💥
      }
      disconnect() {
        console.log("Parent disconnected")
      }
      
      listChildren() {
        console.log(this.childOutlet)
      }
    });

    document.getElementById("remove").addEventListener("click", function() {
      console.log("Removing data-controller attribute");
      document.getElementById("child").setAttribute("data-controller", "");
    });
  </script>
</head>
<body>
  <div id="parent" data-controller="parent" data-parent-child-outlet="#child">
    <button data-action="click->parent#listChildren">List children</button>
  </div>
  <div id="child" data-controller="child"></div>
  <button id="remove">Remove data-controller=child attribute</button>
</body>
</html>

Setting a breakpoint in ScopeObserver.elementMatchedValue() and reloading the page you can see that it is hit twice for child. Clicking the remove button does not trigger disconnect() to be called. Everything works as expected with the marked line commented out.

The text was updated successfully, but these errors were encountered:

ildarkayumov · 2024-04-28T09:36:28Z

Hi.

Looks like the problem occurs because of Outlet#get. So when you load outlet inside of parent controller there is no associated controller for child outlet element and stimulus tries to connect controller with element before show warning message The provided outlet element is missing an outlet controller...

function getControllerAndEnsureConnectedScope(controller: Controller, element: Element, outletName: string) {
  let outletController = getOutletController(controller, element, outletName)
  if (outletController) return outletController

  controller.application.router.proposeToConnectScopeForElementAndIdentifier(element, outletName)
  ...
}

https://github.com/hotwired/stimulus/blob/main/src/core/outlet_properties.ts#L21

sebastianludwig · 2024-05-04T19:44:23Z

I'm not sure that's the right track. At least I'm not seeing the warning in the console 🤔

Edit: It indeed seems to be related. In a similar situation I do get the warning. But I haven't investigated yet what the difference to the example in the issue is and why I'm not seeing the warning there.

ildarkayumov · 2024-05-06T06:42:25Z

please check this

function getControllerAndEnsureConnectedScope(controller: Controller, element: Element, outletName: string) {
  let outletController = getOutletController(controller, element, outletName)
  if (outletController) return outletController

  controller.application.router.proposeToConnectScopeForElementAndIdentifier(element, outletName)

  outletController = getOutletController(controller, element, outletName)
  if (outletController) return outletController
}

function propertiesForOutletDefinition(name: string) {
  const camelizedName = namespaceCamelize(name)

  return {
    [`${camelizedName}Outlet`]: {
      get(this: Controller) {
        const outletElement = this.outlets.find(name)
        const selector = this.outlets.getSelectorForOutletName(name)

        if (outletElement) {
          const outletController = getControllerAndEnsureConnectedScope(this, outletElement, name)

          if (outletController) return outletController

          throw new Error(
            `The provided outlet element is missing an outlet controller "${name}" instance for host controller "${this.identifier}"`
          )
        }
        ...
}

inside singular outlet controller getter getControllerAndEnsureConnectedScope is called and if it returns null then throws and error.
inside getControllerAndEnsureConnectedScope router method router.proposeToConnectScopeForElementAndIdentifier -> elementMatchedValue is called. So this is first time
plus 1 more time elementMatchedValue is called during Stimulus loading

by my opinion calling outlet inside parent_controller#connect does not seem like correct for me because controller loading is not finished yet
I guess the easiest "hacky" fix is to wrap childOutlet with setTimeout.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

disconnect() not called if outlet is accessed in connect() #763

disconnect() not called if outlet is accessed in connect() #763

sebastianludwig commented Apr 21, 2024

ildarkayumov commented Apr 28, 2024

sebastianludwig commented May 4, 2024 •

edited

ildarkayumov commented May 6, 2024 •

edited

disconnect() not called if outlet is accessed in connect() #763

disconnect() not called if outlet is accessed in connect() #763

Comments

sebastianludwig commented Apr 21, 2024

ildarkayumov commented Apr 28, 2024

sebastianludwig commented May 4, 2024 • edited

ildarkayumov commented May 6, 2024 • edited

sebastianludwig commented May 4, 2024 •

edited

ildarkayumov commented May 6, 2024 •

edited