Disable autofocus on loading frame

iain · May 8, 2025, 8:02am

I have multiple turbo frames that each have their own form. When submitting the form, the frame gets reloaded and replaced with a new form. However the user already moved on to the next frame/form. However, when the new frame is rendered, it focuses automatically on the first input in what was just replaced, which interrupts user experience.

I believe this is the piece of code that is causing this behavior:

github.com/hotwired/turbo

src/core/renderer.js

main


      
          focusFirstAutofocusableElement() {
            if (this.shouldAutofocus) {
              const element = this.connectedSnapshot.firstAutofocusableElement
              if (element) {
                element.focus()
              }
            }
          }

There is a boolean that is controlling the behavior, but I don’t know how to change it.

github.com/hotwired/turbo

src/core/renderer.js

main


      
          get shouldAutofocus() {
            return true
          }

Is there a nice configurable way to disable autofocus on render?

iain · May 8, 2025, 8:18am

Of course you’ll find the actual root cause of the problem mere moments after posting the issue on a message board

The multiple forms resulted in the same ID multiple times. As soon as I gave every input element a really unique ID, the problem went away.

Still; I don’t understand where the weird re-focus came from.

Topic		Replies	Views
Reloading form through turbo stream and `focus()`-ing an element	3	796	April 29, 2023
Reload turbo-frame on window focus	2	1076	January 19, 2022
Focus behavior in a list	3	48	February 2, 2025
Why does Turbo Drive "Back" reload Turbo Frames?	4	1972	April 26, 2022
Autofocus an input after loading via stream	2	2247	June 28, 2021

Disable autofocus on loading frame

Related topics