Don't autofocus when rendering page refreshes with morphing

When rendering a page refresh with morphing, if the page has an element with [autofocus], Turbo was
focusing on it (default behavior inherited from `PageRenderer`). With this change, it will only autofocus
when no other element in the page has the focus.

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.

Author: jorgemanrubia

src/core/drive/morph_renderer.js

@@ -11,6 +11,10 @@ export class MorphRenderer extends PageRenderer {
     return "morph"
   }
 
+  get shouldAutofocus() {
+    return document.activeElement == null || document.activeElement == document.body
+  }
+
   // Private
 
   async #morphBody() {

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()
+      }
     }
   }
 

src/tests/fixtures/page_refresh.html

@@ -110,10 +110,10 @@ <h3>Element with Stimulus controller</h3>
       <input>
     </div>
 
-    <form method="get" data-turbo-action="replace" oninput="this.requestSubmit()">
+    <form id="with-autofocus" method="get" data-turbo-action="replace" oninput="this.requestSubmit()">
       <label>
         Search
-        <input name="query">
+        <input id="input-with-auto-focus" name="query" autofocus>
       </label>
       <button>Form with params to refresh the page</button>
     </form>

src/tests/functional/autofocus_tests.js

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { nextBeat, nextEventNamed } from "../helpers/page"
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/autofocus.html")
@@ -74,3 +75,48 @@ test("receiving a Turbo Stream message with an [autofocus] element when an eleme
   })
   await expect(page.locator("#first-autofocus-element")).toBeFocused()
 })
+
+test("focus on [autofocus] elements on page refreshes with morphing when no other element in the page has the focus", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+
+  const input = await page.locator("input[autofocus]")
+
+  await page.evaluate(() => {
+    document.activeElement.blur()
+  })
+
+  await nextBeat()
+  expect(input).not.toBeFocused()
+
+  await page.evaluate(() => {
+    document.querySelector("form#with-autofocus").requestSubmit()
+  })
+
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+
+  await expect(input).toBeFocused()
+})
+
+test("don't focus on [autofocus] elements on page refreshes with morphing when other element in the page has the focus", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+
+  const input = await page.locator("input[autofocus]")
+  const link = await page.locator("#refresh-after-navigation-link")
+
+  await page.evaluate(() => {
+    document.getElementById("refresh-after-navigation-link").focus()
+  })
+
+  await nextBeat()
+  expect(link).toBeFocused()
+  expect(input).not.toBeFocused()
+
+  await page.evaluate(() => {
+    document.querySelector("form#with-autofocus").requestSubmit()
+  })
+
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+
+  expect(link).toBeFocused()
+  expect(input).not.toBeFocused()
+})

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]")