CODEWITHSUNDEEP
ruby-on-railsturbooutlethotwire
BEEK
BEEK

Reputation: 220

Stimulus does not identify outlets in Rails 7 app

In a Rails 7 app, clicking an icon toggles the display property of a form. Both HTML elements connect properly to their respective controllers (toggler and togglee). The form (togglee) is an outlet of the icon (toggler). The problem: The toggler controller does not recognize the togglee outlet. The five outlet properties (e.g. this.toggleeOutlets) remain undefined.

HTML:

<i class="toggle-display fa fa-chevron-down" data-controller="toggler" data-toggler-togglee-outlet="#filter-form" data-action="click->toggler#handleClick" title="Asset Filter"></i>

and below

<div id="filter-form" style="display:none" data-controller="togglee">
  ...
/div>

Controllers:

\\ toggler_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static outlets = [ "togglee" ]

  connect() {
    console.log("Toggler controller connected")
  }

  handleClick(event) {
    console.log("toggler controller: handleClick")
    event.preventDefault();

    console.log("outlet controllers:", this.toggleeOutlets)
    ...
  }
}


\\ togglee_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Togglee controller connected")
  }
}

Console output shows the controllers connect, and react to the click:

Toggler controller connected
Togglee controller connected
toggler controller: handleClick
outlet controllers: undefined

...but the outlet-related properties (such as this.toggleeOutlets) are undefined.

What's wrong?

(BTW - I confirmed that the selector string #filter-form identifies the div element correctly)

Versions:

rails (7.0.1)
stimulus-rails (1.2.1)
turbo-rails (1.3.2)

Upvotes: 8

Views: 1113

Answers (0)

Related Questions