stimulus connect() is being called out of order on reload with data-turbo-permanent #1351
Description
I have data-turbo-permanent
on a text field within a form. When the page updates, the permanent element remains and the stimulus controller disconnects and connects. I know this is the expected behavior and normally it works fine.
However, here is the issue:
When my connect()
method first runs, it finds the text field by referencing this.inputTarget
. But when the page morphs and the stimulus controller disconnects and calls connect()
the second time, the this.inputTarget
fails with:
Error: Missing target element "input" for "search" controller
I fixed the error by changing from connect() to inputTargetConnected()
. But this should not fix the issue according to the stimulus docs. The connect() method is supposed to fire after the individual target connect methods.
The [name]TargetConnected() lifecycle callbacks will fire before the controller’s connect() callback.
from: https://stimulus.hotwired.dev/reference/lifecycle-callbacks