Focus behavior in a list

1

apologies since I’m still new to turbo but i’m not finding exactly what i’m looking for:

I have a a list being rendered like this:

<% @mylist.each do |el| %>
  <%= render partial: "mypartial", locals: { el: el } %>
<% end %>

then my partial looks like this:

<%= turbo_frame_tag dom_id(el) do %>
  <div class="row border-bottom mt-2">
    <div class="col">
      i'm a code
    </div>
    <div class="col">
      i'm a title
    </div>
    <div class="col">
      i'm a description
    </div>
    <div class="col">
      <div class="form-group">
        <%= form_with(
          url: obj_path(el),
          method: :patch,
          html: { class: "form m-1 p-1", data: { controller: "form" } },
        ) do |form| %>

        <%= form.select :event,
          [el.status] + el.aasm.events(permitted: true).map(&:name),
          {},
          class: "form-control",
          data: { action: "change->form#submit" }
        %>

    <% end %>
      </div>
    </div>
  </div>
<% end %>

my controller action:

          format.turbo_stream {
            render turbo_stream: turbo_stream.morph(@el, partial: 'partial', locals: { el: @el })
          }

last, my stimulus controller:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  submit(event) {
    // Prevent the default onchange behavior
    event.preventDefault()
    // Submit the form
    event.target.form.requestSubmit()
  }
}

I think because the element is getting replaced, the browser is losing its position and defaulting it to a previous element. The issue is that on a long list, it scrolls the user back up to the top instead of leaving them where they were. Is there a way to prevent this?

Video for ref

output

2

I am not familiar with Rails but is there an autofocus attribute on the form or select elements?

3

Thanks for looking @Marcel031 - no autofocus in any of the html or css.

4

Exactly, the focus is lost if the input element with the focus is replaced. You could try to add an event listener on turbo:before-morph-element and skip morphing of the input element with focus.

See Turbo Reference

(credits to @radanskoric for this strategy)