From 9d0cd2d84e7718710cb18203d15e0cbb89a4ca0f Mon Sep 17 00:00:00 2001
From: Jeremiah <jeremiah@entretechno.com>
Date: Wed, 27 Jan 2021 21:56:23 -0600
Subject: [PATCH] Preserve input values in cache

Re-submission of https://github.com/hotwired/turbo/pull/70

This change will save the values of `<input>`s, `<textarea>`s, and
`<select>`s when creating a snapshot so that when you navigate back or
forward in history, form fields will not be reset.

This behavior was already present prior to [5dfc79e][] for `<input>`s
and `<textarea>`s but not `<select>`s (see
[turbolinks/turbolinks#238][]).

[5dfc79e]: https://github.com/hotwired/turbo/commit/5dfc79ee2feba441ea9c9b486009d08336e78d76
[turbolinks/turbolinks#238]: https://github.com/turbolinks/turbolinks/issues/238)
---
 src/core/drive/page_snapshot.ts         | 22 +++++++++-
 src/tests/fixtures/rendering.html       | 18 ++++++++
 src/tests/functional/rendering_tests.ts | 58 +++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/src/core/drive/page_snapshot.ts b/src/core/drive/page_snapshot.ts
index 9b5247fad..e636af38a 100644
--- a/src/core/drive/page_snapshot.ts
+++ b/src/core/drive/page_snapshot.ts
@@ -24,7 +24,27 @@ export class PageSnapshot extends Snapshot<HTMLBodyElement> {
   }
 
   clone() {
-    return new PageSnapshot(this.element.cloneNode(true), this.headSnapshot)
+    const clonedElement = this.element.cloneNode(true)
+
+    const singleSelects = this.element.querySelectorAll<HTMLSelectElement>("select:not([multiple])")
+    const clonedSingleSelects = clonedElement.querySelectorAll<HTMLSelectElement>("select:not([multiple])")
+    for (let i = 0; i < singleSelects.length; i++) {
+      clonedSingleSelects[i].value = singleSelects[i].value
+    }
+
+    const multipleSelects = this.element.querySelectorAll<HTMLSelectElement>("select[multiple]")
+    const clonedMultipleSelects = clonedElement.querySelectorAll<HTMLSelectElement>("select[multiple]")
+    for (let i = 0; i < multipleSelects.length; i++) {
+      for (let j = 0; j < multipleSelects[i].options.length; j++) {
+        clonedMultipleSelects[i].options[j].selected = multipleSelects[i].options[j].selected
+      }
+    }
+
+    clonedElement.querySelectorAll<HTMLInputElement>('input[type="password"]').forEach((clonedPasswordInput) => {
+      clonedPasswordInput.value = ""
+    })
+
+    return new PageSnapshot(clonedElement, this.headSnapshot)
   }
 
   get headElement() {
diff --git a/src/tests/fixtures/rendering.html b/src/tests/fixtures/rendering.html
index a10308f8e..44e2d09f6 100644
--- a/src/tests/fixtures/rendering.html
+++ b/src/tests/fixtures/rendering.html
@@ -44,6 +44,24 @@ <h1>Rendering</h1>
       <p><a id="permanent-in-frame-element-link" href="/src/tests/fixtures/permanent_element.html" data-turbo-frame="frame">Permanent element in frame</a></p>
       <p><a id="permanent-in-frame-without-layout-element-link" href="/src/tests/fixtures/frames/without_layout.html" data-turbo-frame="frame">Permanent element in frame without layout</a></p>
       <p><a id="delayed-link" href="/__turbo/delayed_response">Delayed link</a></p>
+      <form>
+        <input type="text" id="text-input">
+        <input type="radio" id="radio-input">
+        <input type="checkbox" id="checkbox-input">
+        <textarea id="textarea"></textarea>
+        <select id="select">
+          <option value="1">1</option>
+          <option value="2">2</option>
+        </select>
+        <select id="select-multiple" multiple>
+          <option value="1">1</option>
+          <option value="2">2</option>
+        </select>
+
+        <input type="password" id="password-input">
+
+        <input type="reset" id="reset-input">
+      </form>
     </section>
     <div id="permanent" data-turbo-permanent>Rendering</div>
 
diff --git a/src/tests/functional/rendering_tests.ts b/src/tests/functional/rendering_tests.ts
index d29b82b88..24a6fc2b6 100644
--- a/src/tests/functional/rendering_tests.ts
+++ b/src/tests/functional/rendering_tests.ts
@@ -8,6 +8,8 @@ import {
   nextBody,
   nextEventNamed,
   pathname,
+  propertyForSelector,
+  readEventLogs,
   scrollToSelector,
   selectorHasFocus,
   sleep,
@@ -19,6 +21,7 @@ import {
 test.beforeEach(async ({ page }) => {
   await page.goto("/src/tests/fixtures/rendering.html")
   await clearLocalStorage(page)
+  await readEventLogs(page)
 })
 
 test("test triggers before-render and render events", async ({ page }) => {
@@ -392,6 +395,61 @@ test("test preserves permanent element video playback", async ({ page }) => {
   assert.equal(timeAfterRender, timeBeforeRender, "element state is preserved")
 })
 
+test("test preserves input values", async ({ page }) => {
+  await page.fill("#text-input", "test")
+  await page.click("#checkbox-input")
+  await page.click("#radio-input")
+  await page.fill("#textarea", "test")
+  await page.selectOption("#select", "2")
+  await page.selectOption("#select-multiple", "2")
+
+  await page.click("#same-origin-link")
+  await nextEventNamed(page, "turbo:load")
+  await page.goBack()
+  await nextEventNamed(page, "turbo:load")
+
+  assert.equal(await propertyForSelector(page, "#text-input", "value"), "test")
+  assert.equal(await propertyForSelector(page, "#checkbox-input", "checked"), true)
+  assert.equal(await propertyForSelector(page, "#radio-input", "checked"), true)
+  assert.equal(await propertyForSelector(page, "#textarea", "value"), "test")
+  assert.equal(await propertyForSelector(page, "#select", "value"), "2")
+  assert.equal(await propertyForSelector(page, "#select-multiple", "value"), "2")
+})
+
+test("test does not preserve password values", async ({ page }) => {
+  await page.fill("#password-input", "test")
+
+  await page.click("#same-origin-link")
+  await nextEventNamed(page, "turbo:load")
+  await page.goBack()
+  await nextEventNamed(page, "turbo:load")
+
+  assert.equal(await propertyForSelector(page, "#password-input", "value"), "")
+})
+
+test("test <input type='reset'> clears values when restored from cache", async ({ page }) => {
+  await page.fill("#text-input", "test")
+  await page.click("#checkbox-input")
+  await page.click("#radio-input")
+  await page.fill("#textarea", "test")
+  await page.selectOption("#select", "2")
+  await page.selectOption("#select-multiple", "2")
+
+  await page.click("#same-origin-link")
+  await nextEventNamed(page, "turbo:load")
+  await page.goBack()
+  await nextEventNamed(page, "turbo:load")
+
+  await page.click("#reset-input")
+
+  assert.equal(await propertyForSelector(page, "#text-input", "value"), "")
+  assert.equal(await propertyForSelector(page, "#checkbox-input", "checked"), false)
+  assert.equal(await propertyForSelector(page, "#radio-input", "checked"), false)
+  assert.equal(await propertyForSelector(page, "#textarea", "value"), "")
+  assert.equal(await propertyForSelector(page, "#select", "value"), "1")
+  assert.equal(await propertyForSelector(page, "#select-multiple", "value"), "")
+})
+
 test("test before-cache event", async ({ page }) => {
   await page.evaluate(() => {
     addEventListener("turbo:before-cache", () => (document.body.innerHTML = "Modified"), { once: true })