Stimulus outlets bug?

1

I was playing around with outlets, and I found this particular issue working with my two stimulus controllers:

search_controller.js:

import { Controller } from "@hotwired/stimulus"


// Connects to data-controller="search"
export default class extends Controller {
  static outlets = ["search-result"]

  connect() {
    console.log("Search controller connected");
    console.log(this.searchResultOutlet);
  }
}

and search_result_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="search-result"
export default class extends Controller {

  connect() {
    console.log("initialize");
  }
}

On my haml page I tried to test the connection between both controllers:

.row
	.col
		.search-results{data: { controller: 'search-result'}}
			%div Hello
		.search{data: {controller: 'search',  "search-search-result-outlet": '.search-results'}}

on the browser console I got this error: “The provided outlet element is missing an outlet controller: search-result”

but, when I change the search_result_controller.js to just result_controller.js, it works.

result_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="result"
export default class extends Controller {
  connect() {
    console.log("initialize");
  }
}

on my search_controller.js, change the outlet from:

static outlets = ["search-result"]

to:

static outlets = ["result"]

and my haml page to:

.row
	.col
		.search-results{data: { controller: 'result'}}
			%div Hello
		.search{data: {controller: 'search', "search-result-outlet": '.search-results'}}

and it works.

1 Like
2

Hello, I had this same problem. After investigating, I noticed that the order in which the controllers are loaded is important for outlets to work.

So in your case you need register search-result before the search. I hope it help for you or someone else that encounter this issue in the future

3

Had the same issue, what it worked for me was to change eagerLoadControllersFrom to lazyLoadControllersFrom in the app/javascript/controllers/index.js file.