Support select:not([multiple]) elements

First, introduce the `PersistElement` type to incorporate `<input>`,
`<textarea>`, and `<select>` elements.

Next, incorporate some special handling for `HTMLSelectElement`, since
they don't have a `.defaultValue` property.

Unfortunately, setting `HTMLSelectElement.value` to anything other than
a single `string` value clears it. This means that `<select>` elements
with the `[multiple]` attribute cannot restore previously selected
`<option>` elements.

src/index.ts

@@ -1,15 +1,29 @@
 // Last submitted HTMLFormElement that will cause a browser navigation.
 let submittedForm: HTMLFormElement | null = null
 
-function shouldResumeField(field: HTMLInputElement | HTMLTextAreaElement, filter: StorageFilter): boolean {
+function shouldResumeField(field: PersistElement, filter: StorageFilter): boolean {
   return !!field.id && filter(field) && field.form !== submittedForm
 }
 
-function valueIsUnchanged(field: HTMLInputElement | HTMLTextAreaElement): boolean {
-  return field.value !== field.defaultValue
+function valueIsUnchanged(field: PersistElement): boolean {
+  if (field instanceof HTMLSelectElement) {
+    return true
+  } else {
+    return field.value !== field.defaultValue
+  }
+}
+
+function isPersistElement(node: Node | null): node is PersistElement {
+  if (node instanceof HTMLSelectElement) {
+    return !node.multiple
+  } else {
+    return node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement
+  }
 }
 
-type StorageFilter = (field: HTMLInputElement | HTMLTextAreaElement) => boolean
+type PersistElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+
+type StorageFilter = (field: PersistElement) => boolean
 
 type PersistOptionsWithSelector = {
   scope?: ParentNode
@@ -49,13 +63,12 @@ export function persistResumableFields(id: string, options?: PersistOptions): vo
   const resumables = []
 
   for (const el of elements) {
-    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+    if (isPersistElement(el)) {
       resumables.push(el)
     }
   }
 
   let fields = resumables.filter(field => shouldResumeField(field, storageFilter)).map(field => [field.id, field.value])
-
   if (fields.length) {
     try {
       const previouslyStoredFieldsJson = storage.getItem(key)
@@ -99,7 +112,7 @@ export function restoreResumableFields(id: string, options?: RestoreOptions): vo
 
   if (!fields) return
 
-  const changedFields: Array<HTMLInputElement | HTMLTextAreaElement> = []
+  const changedFields: PersistElement[] = []
   const storedFieldsNotFound: string[][] = []
 
   for (const [fieldId, value] of JSON.parse(fields)) {
@@ -111,8 +124,11 @@ 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)) {
-        if (field.value === field.defaultValue) {
+      if (isPersistElement(field)) {
+        if (field instanceof HTMLSelectElement) {
+          field.value = value
+          changedFields.push(field)
+        } else if (field.value === field.defaultValue) {
           field.value = value
           changedFields.push(field)
         }

test/test.js

@@ -8,18 +8,33 @@ describe('session-resume', function () {
       <form>
         <input id="my-first-field" value="first-field-value" class="js-session-resumable" />
         <input id="my-second-field" value="second-field-value" class="js-session-resumable" />
+        <select id="my-single-select-field" class="js-session-resumable">
+          <option value="first">first</option>
+          <option value="second">second</option>
+        </select>
+        <select id="my-multiple-select-field" class="js-session-resumable" multiple>
+          <option value="first" selected>first</option>
+          <option value="second" selected>second</option>
+        </select>
       </form>
     `
     window.addEventListener('submit', sessionStorage.setForm, {capture: true})
   })
 
   describe('restoreResumableFields', function () {
     it('restores fields values from session storage by default', 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'],
+          ['my-single-select-field', 'second']
+        ])
+      )
       restoreResumableFields('test-persist')
 
       assert.equal(document.querySelector('#my-first-field').value, 'test2')
       assert.equal(document.querySelector('#my-second-field').value, 'second-field-value')
+      assert.equal(document.querySelector('#my-single-select-field').value, 'second')
     })
 
     it('uses a Storage object when provided as an option', function () {
@@ -38,6 +53,7 @@ describe('session-resume', function () {
 
       assert.equal(document.querySelector('#my-first-field').value, 'test2')
       assert.equal(document.querySelector('#my-second-field').value, 'second-field-value')
+      assert.equal(document.querySelector('#my-single-select-field').value, 'second')
     })
 
     it('leaves unrestored values in session storage', function () {
@@ -104,13 +120,15 @@ describe('session-resume', function () {
 
       assert.deepEqual(JSON.parse(sessionStorage.getItem('session-resume:test-persist')), [
         ['my-first-field', 'test1'],
-        ['my-second-field', 'test2']
+        ['my-second-field', 'test2'],
+        ['my-single-select-field', 'second']
       ])
     })
 
     it('uses a Storage object when provided as an option', function () {
       document.querySelector('#my-first-field').value = 'test1'
       document.querySelector('#my-second-field').value = 'test2'
+      document.querySelector('#my-single-select-field').value = 'second'
 
       const fakeStorageBackend = {}
       const fakeStorage = {
@@ -126,20 +144,23 @@ describe('session-resume', function () {
 
       assert.deepEqual(JSON.parse(fakeStorage.getItem('session-resume:test-persist')), [
         ['my-first-field', 'test1'],
-        ['my-second-field', 'test2']
+        ['my-second-field', 'test2'],
+        ['my-single-select-field', 'second']
       ])
     })
 
     it('holds onto existing values in the store', function () {
       sessionStorage.setItem('session-resume:test-persist', JSON.stringify([['non-existant-field', 'test3']]))
       document.querySelector('#my-first-field').value = 'test1'
       document.querySelector('#my-second-field').value = 'test2'
+      document.querySelector('#my-single-select-field').value = 'second'
 
       persistResumableFields('test-persist')
 
       assert.deepEqual(JSON.parse(sessionStorage.getItem('session-resume:test-persist')), [
         ['my-first-field', 'test1'],
         ['my-second-field', 'test2'],
+        ['my-single-select-field', 'second'],
         ['non-existant-field', 'test3']
       ])
     })
@@ -148,12 +169,14 @@ describe('session-resume', function () {
       sessionStorage.setItem('session-resume:test-persist', JSON.stringify([['my-first-field', 'old data']]))
       document.querySelector('#my-first-field').value = 'test1'
       document.querySelector('#my-second-field').value = 'test2'
+      document.querySelector('#my-single-select-field').value = 'second'
 
       persistResumableFields('test-persist')
 
       assert.deepEqual(JSON.parse(sessionStorage.getItem('session-resume:test-persist')), [
         ['my-first-field', 'test1'],
-        ['my-second-field', 'test2']
+        ['my-second-field', 'test2'],
+        ['my-single-select-field', 'second']
       ])
     })
 
@@ -188,6 +211,7 @@ describe('session-resume', function () {
         ['my-second-field', 'test2']
       ])
     })
+
     it('scopes fields based on the fields: option', function () {
       document.getElementById('my-first-field').value = 'test1'
       document.getElementById('my-second-field').value = 'test2'