Morph with ignoreActiveValue: true

Morph with the [ignoreActiveValue: true][] option to morph the currently
focused element's attributes, but preserve its value.

This behavior can be extremely helpful when paired with an
auto-submitting `<form>` element, like a typeahead `[role="combobox"]`,
or an auto-submitting [`<input type="search">`][search].

This commit depends on a fork of `idiomorph` that [fixes a bug related
to `ignoreActiveValue: true`][bigskysoftware/idiomorph#34].

[ignoreActiveValue: true]: https://github.com/bigskysoftware/idiomorph#options
[search]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
[bigskysoftware/idiomorph#34]: bigskysoftware/idiomorph#34

src/core/drive/morph_renderer.js

@@ -29,6 +29,7 @@ export class MorphRenderer extends Renderer {
     this.isMorphingTurboFrame = this.#isFrameReloadedWithMorph(currentElement)
 
     Idiomorph.morph(currentElement, newElement, {
+      ignoreActiveValue: true,
       morphStyle: morphStyle,
       callbacks: {
         beforeNodeAdded: this.#shouldAddElement,

src/tests/fixtures/page_refresh.html

@@ -88,6 +88,13 @@ <h3>Element with Stimulus controller</h3>
       <input>
     </div>
 
+    <form method="get" data-turbo-action="replace" oninput="this.requestSubmit()">
+      <label>
+        Search
+        <input name="query">
+      </label>
+      <button>Form with params to refresh the page</button>
+    </form>
     <p><a id="replace-link" data-turbo-action="replace" href="/src/tests/fixtures/page_refresh.html?param=something">Link with params to refresh the page</a></p>
     <p><a id="link" href="/src/tests/fixtures/one.html">Link to another page</a></p>
 

src/tests/functional/page_refresh_tests.js

@@ -7,7 +7,8 @@ import {
   nextEventNamed,
   nextEventOnTarget,
   noNextEventOnTarget,
-  noNextEventNamed
+  noNextEventNamed,
+  getSearchParam
 } from "../helpers/page"
 
 test("renders a page refresh with morphing", async ({ page }) => {
@@ -81,6 +82,24 @@ 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 }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+
+  const input = page.locator("form[method=get] input[name=query]")
+
+  await input.fill("Search")
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+
+  await expect(input).toBeFocused()
+  expect(getSearchParam(page.url(), "query")).toEqual("Search")
+
+  await input.press("?")
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+
+  await expect(input).toBeFocused()
+  expect(getSearchParam(page.url(), "query")).toEqual("Search?")
+})
+
 test("doesn't morph when the turbo-refresh-method meta tag is not 'morph'", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh_replace.html")
 
@@ -181,12 +200,12 @@ test("it preserves focus across morphs", async ({ page }) => {
 
   const input = await page.locator("#form input[type=text]")
 
-  await input.fill("Discard me")
+  await input.fill("Preserve me")
   await input.press("Enter")
   await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
 
   await expect(input).toBeFocused()
-  await expect(input).toHaveValue("")
+  await expect(input).toHaveValue("Preserve me")
 })
 
 test("it preserves focus and the [data-turbo-permanent] element's value across morphs", async ({ page }) => {