manage fields not immediately present in DOM

There are some cases where fields may not immediately be present in the
DOM and added later (GitHub Slash Commands for instance). In these
cases, when the fields are restored, those not present in the DOM are
not restored (because they simply don't exist yet), however we completely
remove all the stored fields' values from the session store. This means that
fields that are added later will not have a change to restore their data.

This change holds onto field values for fields that weren't able to be
located in case that field is added to the DOM later and can then be
restored.

If a textarea never appears, it would stay in the session storage until the
tab is closed. Because session storage is scoped to the tab, automatically
cleared when the tab is closed, and has a 5 MB limit, this is unlikely to cause
memory bloat problems.

Author: jklina

src/index.ts

@@ -46,13 +46,8 @@ export function restoreResumableFields(id: string, options?: RestoreOptions): vo
 
   if (!fields) return
 
-  try {
-    sessionStorage.removeItem(key)
-  } catch {
-    // Ignore browser private mode error.
-  }
-
   const changedFields: Array<HTMLInputElement | HTMLTextAreaElement> = []
+  const storedFieldsNotFound: string[][] = []
 
   for (const [fieldId, value] of JSON.parse(fields)) {
     const resumeEvent = new CustomEvent('session:resume', {
@@ -63,17 +58,30 @@ export function restoreResumableFields(id: string, options?: RestoreOptions): vo
 
     if (document.dispatchEvent(resumeEvent)) {
       const field = document.getElementById(fieldId)
-      if (
-        field &&
-        (field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement) &&
-        field.value === field.defaultValue
-      ) {
-        field.value = value
-        changedFields.push(field)
+      if (field && (field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement)) {
+        if (field.value === field.defaultValue) {
+          field.value = value
+          changedFields.push(field)
+        }
+      } else {
+        storedFieldsNotFound.push([fieldId, value])
       }
     }
   }
 
+  // Some fields we want to restore are not always immediately present in the
+  // DOM and may be added later. This holds onto the values until
+  // they're needed.
+  if (storedFieldsNotFound.length === 0) {
+    try {
+      sessionStorage.removeItem(key)
+    } catch {
+      // Ignore browser private mode error.
+    }
+  } else {
+    sessionStorage.setItem(key, JSON.stringify(storedFieldsNotFound))
+  }
+
   setTimeout(function () {
     for (const el of changedFields) {
       el.dispatchEvent(new CustomEvent('change', {bubbles: true, cancelable: true}))

test/test.js

@@ -13,11 +13,32 @@ describe('session-resume', function () {
 
   describe('restoreResumableFields', function () {
     it('restores fields values from session storage', function () {
-      sessionStorage.setItem('session-resume:test-persist', JSON.stringify([['my-first-field', 'test2']]))
+      sessionStorage.setItem(
+        'session-resume:test-persist',
+        JSON.stringify([
+          ['my-first-field', 'test2'],
+          ['non-existant-field', 'test3']
+        ])
+      )
       restoreResumableFields('test-persist')
 
       assert.equal(document.querySelector('#my-first-field').value, 'test2')
       assert.equal(document.querySelector('#my-second-field').value, 'second-field-value')
+
+      // Some fields we want to restore are not always present in the DOM
+      // and may be added later. We hold onto the values until they're needed.
+      assert.deepEqual(JSON.parse(sessionStorage.getItem('session-resume:test-persist')), [
+        ['non-existant-field', 'test3']
+      ])
+    })
+
+    it('removes the sessionStore key when all the fields were found', function () {
+      sessionStorage.setItem('session-resume:test-persist', JSON.stringify([['my-first-field', 'test2']]))
+      restoreResumableFields('test-persist')
+
+      // Some fields we want to restore are not always present in the DOM
+      // and may be added later. We hold onto the values until they're needed.
+      assert.equal(sessionStorage.getItem('session-resume:test-persist'), null)
     })
 
     it('fires off session:resume events for changed fields', function () {