Error: Missing target element "autocomplete.results" about stimulus-autocomplete

[drnic]

I can't think of anything.

Is there any possibility you have css or js that removes that <ul class="list-group" data-autocomplete-target="results"></ul> element, or that it doesn't exist yet, before the controller connect() is run?

The connect() method starts with mutating the this.resultsTarget, so it might not be specifically an issue with that node, but a more general issue:

  connect() {
    this.resultsTarget.hidden = true

What I mean is, since this first line fails, we can't confirm that the controller is happy about the other targets either; and the issue might be elsewhere in the DOM/javascript loading sequence.

[AlainPilon]

Your explanation makes sense, but I can't figure out why/how the connect call would be run before the HTML is rendered. It is all static code. I will try on another page with a simpler setup and see how it goes.

I will close the issue since it seems to be specific to my setup. Thx

[drnic]

I trust your problem is real; you’re getting a real error :) If you do figure it out, please leave a note here for the next person (who might even be you one day) Thx -- Dr Nic Williams [phone] twitter @drnic

[AlainPilon]

Yes the problem is real and apparently, I am not the only one having similar weird issues:

• https://stackoverflow.com/questions/64216804/why-am-i-getting-target-element-missing-error
• https://discuss.hotwire.dev/t/missing-target-element-error/292/5

I even tried this (promising) solution:

• hotwired/stimulus#97 (comment)

but it did not work either. I am wondering if this is Hotwire/Turbo related.

[rafaelmadeira]

I was just having this same issue trying to implement this auto-growing textarea.

It worked perfectly until I tried to submit a form with validation errors. Then the auto-growth broke and I got the Error: Missing target element "auto-grow-textarea.input".

I'm using Rails 7 with Turbo and forms are submitted via AJAX so I figured the lack of actual reloading was somehow messing with the process. I'm not sure exactly what information gets persisted/reloaded during these requests, but I figured the textarea had to be part of it, so I moved the controller declaration from the parent element to the <textarea> element itself. It worked. In the end, it looked like data: { controller: "auto-grow-textarea", action: ....

(I know this is not related to stimulus-autocomplete, just sharing in case it might help others who end up here with the same problem.)