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