Outlet name must be same as controller name

[tito10047]

in

stimulus/src/core/outlet_set.ts

Line 69 in af88dbf

return element.matches(selector) && controllerAttribute.split(" ").includes(outletName)

is checked , if outlet name is in controller attributes.
its means that outlet name must be same as controller name. Its this correct?

this code dont work because outlet name is diferent as controller name
https://codepen.io/tito100/pen/VwGBmoZ

If its this correct behavior, please add it to documentation.

[chrisdmacrae]

I lost over 4 hours to this.

This is extremely frustrating behaviour -- the docs don't reflect this logic at all.

[intradayreview]

It makes sense to work this way, as it ensures the correct controller is referenced.

That being said, it caught me too.

[lu-x]

This also got into my way, additionally i'm using namespaced controllers and i cannot make it work.

Example (using Slim here for the markup):

// 'parent'
div data-controller="hello" data-hello-charts--navbar-outlet="#some-id"

// outlet
#some-id data-controller="charts--navbar"

// 'parent' controller outlet definition
static get outlets() { return ['charts--navbar'] }

-> this.chartsNavbarOutlets is always empty

[lu-x]

Nevermind, it works as expected 🎉

[neilmiddleton]

👋 another person with a couple of hours chasing this. A small edit to the docs should mostly resolve it

[ragboyjr]

Another one bites the dust :). In my specific example, my outlet target controller was named price-input. It wasn't obvious that value in the outlet definition should have been like: outlets = ['price-input']. I figured it would need to be outlets = ['priceInput'] similar to how targets and values go from dash separated to camel case.

[unikitty37]

So if the outlet name has to be the same as the controller name, what do we do if we need to have two sets of outlets (with different selectors) on the same controller?

All I can think of is to pass a selector that will pick up both and then do logic to filter the outlets array — but Stimulus should be making life easier for developers, and I really can't see how this restriction does that.

As somebody coming to outlets fairly recently, I can confirm that #679 doesn't give enough detail in the docs to prevent people from getting derailed by this — but I'd favour removing the restriction and letting us give the outlets names that reflect their purpose rather than continually trying to enhance the documentation covering the restriction…

[tacman]

Like others here, I spent a few hours trying to understand why one outlet worked but not the other. And I thought I read the documentation. This issue title turned out to be the solution.

Outlets are really excellent, easier than dispatching events, but a way to alias the outlet would be most helpful.

[darrynten]

Please update the docs to show that the outlet name must match the controller, this was hours of debugging for me to finally find this issue!