WIP

hotwired · Sep 13, 2024 · 23791a0 · 23791a0
1 parent a836b8b
commit 23791a0
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 18 deletions.
diff --git a/src/core/bardo.js b/src/core/bardo.js
@@ -35,7 +35,9 @@ export class Bardo {
 
   replaceCurrentPermanentElementWithClone(permanentElement) {
     const clone = permanentElement.cloneNode(true)
+    const shouldRefocus = document.activeElement == permanentElement
     permanentElement.replaceWith(clone)
+    if (shouldRefocus) clone.focus()
   }
 
   replacePlaceholderWithPermanentElement(permanentElement) {

diff --git a/src/core/drive/morphing_page_renderer.js b/src/core/drive/morphing_page_renderer.js
@@ -18,10 +18,6 @@ export class MorphingPageRenderer extends PageRenderer {
     dispatch("turbo:morph", { detail: { currentElement, newElement } })
   }
 
-  async preservingPermanentElements(callback) {
-    return await callback()
-  }
-
   get renderMethod() {
     return "morph"
   }

diff --git a/src/core/frames/morphing_frame_renderer.js b/src/core/frames/morphing_frame_renderer.js
@@ -11,8 +11,4 @@ export class MorphingFrameRenderer extends FrameRenderer {
 
     morphChildren(currentElement, newElement)
   }
-
-  async preservingPermanentElements(callback) {
-    return await callback()
-  }
 }
diff --git a/src/core/morphing.js b/src/core/morphing.js
@@ -21,13 +21,9 @@ class DefaultIdiomorphCallbacks {
     this.#beforeNodeMorphed = beforeNodeMorphed || (() => true)
   }
 
-  beforeNodeAdded = (node) => {
-    return !(node.id && node.hasAttribute("data-turbo-permanent") && document.getElementById(node.id))
-  }
-
   beforeNodeMorphed = (currentElement, newElement) => {
     if (currentElement instanceof Element) {
-      if (!currentElement.hasAttribute("data-turbo-permanent") && this.#beforeNodeMorphed(currentElement, newElement)) {
+      if (this.#beforeNodeMorphed(currentElement, newElement)) {
         const event = dispatch("turbo:before-morph-element", {
           cancelable: true,
           target: currentElement,

diff --git a/src/core/snapshot.js b/src/core/snapshot.js
@@ -21,6 +21,10 @@ export class Snapshot {
     return anchor ? this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`) : null
   }
 
+  getElementById(id) {
+    return this.element.querySelector(`#${id}`)
+  }
+
   get isConnected() {
     return this.element.isConnected
   }
@@ -42,7 +46,7 @@ export class Snapshot {
 
     for (const currentPermanentElement of this.permanentElements) {
       const { id } = currentPermanentElement
-      const newPermanentElement = snapshot.getPermanentElementById(id)
+      const newPermanentElement = snapshot.getElementById(id)
       if (newPermanentElement) {
         permanentElementMap[id] = [currentPermanentElement, newPermanentElement]
       }

diff --git a/src/tests/fixtures/page_refresh.html b/src/tests/fixtures/page_refresh.html
@@ -15,10 +15,12 @@
       const application = Application.start()
 
       addEventListener("focusin", ({ target }) => {
-        if (target instanceof HTMLInputElement && !target.hasAttribute("data-turbo-permanent")) {
+        if (target instanceof HTMLInputElement && target.hasAttribute("data-toggle-permanent-on-focus")) {
           target.toggleAttribute("data-turbo-permanent", true)
 
-          target.addEventListener("focusout", () => target.toggleAttribute("data-turbo-permanent", false), { once: true })
+          target.addEventListener("focusout", () => {
+            target.toggleAttribute("data-turbo-permanent", false)
+          }, { once: true })
         }
       })
 
@@ -114,7 +116,7 @@ <h3>Element with Stimulus controller</h3>
     <form method="get" data-turbo-action="replace" oninput="this.requestSubmit()">
       <label>
         Search
-        <input name="query">
+        <input id="query" name="query" data-toggle-permanent-on-focus>
       </label>
       <button>Form with params to refresh the page</button>
     </form>

diff --git a/src/tests/functional/page_refresh_tests.js b/src/tests/functional/page_refresh_tests.js
@@ -280,7 +280,7 @@ test("it preserves focus across morphs", async ({ page }) => {
   await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
 
   await expect(input).toBeFocused()
-  await expect(input).toHaveValue("Preserve me")
+  await expect(input).toHaveValue("")
 })
 
 test("it preserves focus and the [data-turbo-permanent] element's value across morphs", async ({ page }) => {