How do I autofocus to text input field in modal? Rails 7, Bootstrap 5

I have a search button in the top navbar. When the user clicks, a modal opens with a text input field. I want the keyboard focus to be automatically inside the text input field when the modal opens.

Here is the search modal code:

<div class="modal" id="searchModal" tabindex="1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div开发者_Go百科 class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="searchModalLabel">Search parks</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%= search_form_for @q, url: :parks do |f| %>
          <%= f.hidden_field :has_entrance_fee_eq %>
          <%= f.hidden_field :region_eq %>

          <div class="form-group">
            <%= f.text_field :name_en_or_name_he_or_description_en_or_description_he_cont,
                              autofocus: true, 
                              placeholder: "Search for a park (English or Hebrew)",
                              class: "form-control" %>
          </div>

          <div class="form-group">
            <%= f.submit 'Search parks', name: "", class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

I've already tried simply adding autofocus: true in the rails form, but it doesn't work:

          <div class="form-group">
            <%= f.text_field :name_en_or_name_he_or_description_en_or_description_he_cont,
                              autofocus: true, 
                              placeholder: "Search for a park (English or Hebrew)",
                              class: "form-control" %>
          </div>

The Bootstrap documentation says:

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

But I'm not really familiar with Javascript so not sure where/how to use this code, if this is indeed the right direction... In general I'm new to coding so any help would be much appreciated, the more specific the better!

Update:

I tried adding the following code to the search modal but it didn't work:

<script>
  // Get the modal and the input element
  var myModal = document.getElementById('searchModal')
  var myInput = document.querySelector('input')

  // Add a listener for the shown.bs.modal event on the modal
  myModal.addEventListener('shown.bs.modal', function() {
    // When the modal is shown, focus the input element
    myInput.focus()
  })
</script>