Don't autofocus when rendering page refreshes with morphing

Before this change, Turbo would always focus on the first element with `[autofocus]` when a page refresh with morphing happened (default behavior inherited from `PageRenderer`). With this change, it will never autofocus when a page refresh with morphing happens. This is meant to solve the problem where you are writing on a form, and it loses the focus because a broadcasted page refresh arrives.
hotwired · May 30, 2024 · c818307 · c818307
1 parent 89be8e4
commit c818307
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 4 deletions.
diff --git a/src/core/drive/morph_renderer.js b/src/core/drive/morph_renderer.js
@@ -11,6 +11,10 @@ export class MorphRenderer extends PageRenderer {
     return "morph"
   }
 
+  get shouldAutofocus() {
+    return false
+  }
+
   // Private
 
   async #morphBody() {

diff --git a/src/core/renderer.js b/src/core/renderer.js
@@ -16,6 +16,10 @@ export class Renderer {
     return true
   }
 
+  get shouldAutofocus() {
+    return true
+  }
+
   get reloadReason() {
     return
   }
@@ -40,9 +44,11 @@ export class Renderer {
   }
 
   focusFirstAutofocusableElement() {
-    const element = this.connectedSnapshot.firstAutofocusableElement
-    if (element) {
-      element.focus()
+    if (this.shouldAutofocus) {
+      const element = this.connectedSnapshot.firstAutofocusableElement
+      if (element) {
+        element.focus()
+      }
     }
   }
 

diff --git a/src/tests/fixtures/autofocus.html b/src/tests/fixtures/autofocus.html
@@ -5,6 +5,8 @@
     <title>Autofocus</title>
     <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
     <script src="/src/tests/fixtures/test.js"></script>
+    <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-refresh-scroll" content="preserve">
   </head>
   <body>
     <h1>Autofocus</h1>
@@ -22,5 +24,12 @@ <h1>Autofocus</h1>
     <turbo-frame id="drives-frame" target="frame">
       <a id="drives-frame-target-link" href="/src/tests/fixtures/frames/form.html">#drives-frame link to frames/form.html</a>
     </turbo-frame>
+
+    <form id="form" action="/__turbo/refresh" method="post" class="redirect">
+      <input id="form-text" type="text" name="text" value="" autofocus>
+      <input type="hidden" name="path" value="/src/tests/fixtures/autofocus.html">
+      <input type="hidden" name="sleep" value="50">
+      <input id="form-submit" type="submit" value="form[method=post]">
+    </form>
   </body>
 </html>
diff --git a/src/tests/functional/autofocus_tests.js b/src/tests/functional/autofocus_tests.js
@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { nextEventNamed, nextPageRefresh } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/autofocus.html")
@@ -74,3 +75,24 @@ test("receiving a Turbo Stream message with an [autofocus] element when an eleme
   })
   await expect(page.locator("#first-autofocus-element")).toBeFocused()
 })
+
+test("don't focus on [autofocus] elements on page refreshes with morphing", async ({ page }) => {
+  const input = await page.locator("#form input[autofocus]")
+
+  const button = page.locator("#first-autofocus-element")
+  await button.click()
+
+  await nextPageRefresh(page)
+
+  await expect(button).toBeFocused()
+  await expect(input).not.toBeFocused()
+
+  await page.evaluate(() => {
+    document.querySelector("#form").requestSubmit()
+  })
+
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+  await nextPageRefresh(page)
+
+  await expect(button).toBeFocused()
+})
diff --git a/src/tests/functional/page_refresh_tests.js b/src/tests/functional/page_refresh_tests.js
@@ -109,7 +109,7 @@ test("renders a page refresh with morphing when the paths are the same but searc
   await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
 })
 
-test("renders a page refresh with morphing when the GET form paths are the same but search params are diferent", async ({ page }) => {
+test("renders a page refresh with morphing when the GET form paths are the same but search params are different", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")
 
   const input = page.locator("form[method=get] input[name=query]")