TargetConnected callback being called before access to element

1

I’m using a Turbo stream to create a new row in a table, which works fine, but after creating, I need to set focus on the new row for accessibility considerations.

From the console.log, I can view the newly created row / element, but when trying to set focus on it below, I don’t have access to it (assuming from the doc, that the callback is triggered before actual connection).

If I wrap the row in question that was newly created in an old school jquery ready function, the focus set works.

I’m a bit perplexed. I would think the whole point of this callback is exactly for this purpose, to have access to a newly created element. What am I missing?

I saw a similar post regarding version, but I think my version here is newer than mentioned in the post where it was an issue.

"@hotwired/stimulus": "^3.1.1",

stimulus-rails (1.3.3)

  descriptionFieldTargetConnected(element) {
    console.log(element)
    element.tabIndex = 0
    element.focus()
    
    let rowId = document.getElementById('pcr_form_documents').lastElementChild.dataset.index
    $( document ).ready(function() {
      document.getElementById(`pcr_form_pcr_form_documents_attributes_${rowId}_description`).tabIndex = 0
      document.getElementById(`pcr_form_pcr_form_documents_attributes_${rowId}_description`).focus();
    })
  }