bard-tag_field 0.7.3 → 0.7.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b7ac94a1fb550eb7e58297a8cc81307d54586f0fbbd078330b8b956707d341f
-  data.tar.gz: fd32175f829a10338b99c87e14357bfa7093dd37a44cbb62eac3d601748579cb
+  metadata.gz: 5af78ac6af58f7abb2ec0f83972de2d3265bdf2e7fe2590d3325d450954fdc3f
+  data.tar.gz: 32aaedf19954e5e7abefc0866aa1b33e738dbb2f5d64778adfc04dddc838c039
 SHA512:
-  metadata.gz: 9641455d386d85398760439770086aa56b9cdb3f6d3c7dd5529fdd729e106bcdd1b99376fcde56ed4283f43038f0de2c74a9e8cb72f84e14647ef9004ce38ec4
-  data.tar.gz: d7aa23769d039fbbd4dd105f2c3f813d583be752c39d714f92b571f14f81c7a7aa7a8911c5c7cd09f00c0bc81cc25efa99fc4be5b18906b851e6c562abf219bb
+  metadata.gz: 705a9da9dd9164c92dc74cdb9080312f9e2c76e713f6677d0c3d8845e4ea25c0d9e58f57509731c947914aacf26d2392fdf35876dd33b527f934b6b57969f53a
+  data.tar.gz: c9936f93229bcee51aaf934248caab4ffd8b644df3330b19b04ed828c1909207c5205bb926c5ab97177afafe0f0831be1588f8672cda615796172596d8705136

data/app/assets/javascripts/input-tag.js

@@ -1284,7 +1284,9 @@ class InputTag extends HTMLElement {
     if (values.length === 0) {
       formData.append(this.name, "");
     }
-    this._internals.setFormValue(formData);
+    // State is a JSON string, not the FormData: Firefox flattens a FormData to {} in the
+    // session store and restores it as "[object Object]", but a string survives intact.
+    this._internals.setFormValue(formData, JSON.stringify(values));
   }
 
   get name() {
@@ -1342,6 +1344,29 @@ class InputTag extends HTMLElement {
     this._updateButtonContent();
   }
 
+  // On session restore Firefox hands back the state we saved (a JSON string of tag values).
+  // Rebuild the tags from it so they survive a browser restart; before taggle is ready, stash
+  // them for connectedCallback, and fall back to the current tags if the state is malformed.
+  formStateRestoreCallback(state) {
+    const values = this._restoredValues(state);
+    if (values) {
+      if (this._taggle && this.initialized) this.value = values;
+      else this._pendingRestoredValues = values;
+    } else {
+      this._setFormValue(this._taggle ? this._taggle.getTagValues() : []);
+    }
+  }
+
+  _restoredValues(state) {
+    if (typeof state !== "string") return null
+    try {
+      const values = JSON.parse(state);
+      return Array.isArray(values) ? values : null
+    } catch {
+      return null
+    }
+  }
+
   get options() {
     const datalistId = this.getAttribute("list");
     if(datalistId) {
@@ -1434,7 +1459,13 @@ class InputTag extends HTMLElement {
     this._taggleInputTarget.setAttribute("data-turbo-permanent", true);
     this._taggleInputTarget.addEventListener("keyup", e => this.keyup(e));
 
-    // Set initial value after taggle is initialized
+    // Set initial value after taggle is initialized. A session restore that arrived before
+    // taggle was ready is applied here, so its tags and submission value both come back.
+    if (this._pendingRestoredValues) {
+      const restored = this._pendingRestoredValues;
+      this._pendingRestoredValues = null;
+      if (restored.length > 0) this._taggle.add(restored);
+    }
     this.value = this._taggle.getTagValues();
 
     this.checkRequired();

data/input-tag/src/input-tag.js

@@ -288,7 +288,9 @@ class InputTag extends HTMLElement {
     if (values.length === 0) {
       formData.append(this.name, "");
     }
-    this._internals.setFormValue(formData);
+    // State is a JSON string, not the FormData: Firefox flattens a FormData to {} in the
+    // session store and restores it as "[object Object]", but a string survives intact.
+    this._internals.setFormValue(formData, JSON.stringify(values));
   }
 
   get name() {
@@ -346,6 +348,29 @@ class InputTag extends HTMLElement {
     this._updateButtonContent()
   }
 
+  // On session restore Firefox hands back the state we saved (a JSON string of tag values).
+  // Rebuild the tags from it so they survive a browser restart; before taggle is ready, stash
+  // them for connectedCallback, and fall back to the current tags if the state is malformed.
+  formStateRestoreCallback(state) {
+    const values = this._restoredValues(state)
+    if (values) {
+      if (this._taggle && this.initialized) this.value = values
+      else this._pendingRestoredValues = values
+    } else {
+      this._setFormValue(this._taggle ? this._taggle.getTagValues() : [])
+    }
+  }
+
+  _restoredValues(state) {
+    if (typeof state !== "string") return null
+    try {
+      const values = JSON.parse(state)
+      return Array.isArray(values) ? values : null
+    } catch {
+      return null
+    }
+  }
+
   get options() {
     const datalistId = this.getAttribute("list")
     if(datalistId) {
@@ -438,7 +463,13 @@ class InputTag extends HTMLElement {
     this._taggleInputTarget.setAttribute("data-turbo-permanent", true)
     this._taggleInputTarget.addEventListener("keyup", e => this.keyup(e))
 
-    // Set initial value after taggle is initialized
+    // Set initial value after taggle is initialized. A session restore that arrived before
+    // taggle was ready is applied here, so its tags and submission value both come back.
+    if (this._pendingRestoredValues) {
+      const restored = this._pendingRestoredValues
+      this._pendingRestoredValues = null
+      if (restored.length > 0) this._taggle.add(restored)
+    }
     this.value = this._taggle.getTagValues()
 
     this.checkRequired()

data/input-tag/test/form-state-restore.test.js

@@ -0,0 +1,54 @@
+import { expect } from '@esm-bundle/chai'
+import '../src/input-tag.js'
+import { setupGlobalTestHooks, setupInputTag, waitForUpdate } from './lib/test-utils.js'
+
+describe('Form state restore (Firefox session restore)', () => {
+  setupGlobalTestHooks()
+
+  it('saves the tag values as a JSON string form state, not the FormData Firefox flattens', async () => {
+    const inputTag = await setupInputTag(`
+      <form><input-tag name="labels[]" multiple>
+        <tag-option value="urgent">urgent</tag-option>
+        <tag-option value="backend">backend</tag-option>
+      </input-tag></form>
+    `)
+    await waitForUpdate()
+
+    const states = []
+    const internals = inputTag._internals
+    const real = internals.setFormValue.bind(internals)
+    internals.setFormValue = (value, state) => { states.push(state); real(value, state) }
+
+    inputTag.add('frontend')
+    await waitForUpdate()
+
+    const lastState = states[states.length - 1]
+    expect(lastState).to.be.a('string')
+    expect(JSON.parse(lastState)).to.eql(['urgent', 'backend', 'frontend'])
+  })
+
+  it('rebuilds the tags from a restored state string', async () => {
+    const inputTag = await setupInputTag(`<form><input-tag name="labels[]" multiple></input-tag></form>`)
+    await waitForUpdate()
+    expect(inputTag.tags).to.eql([])
+
+    inputTag.formStateRestoreCallback(JSON.stringify(['urgent', 'backend']))
+    await waitForUpdate()
+
+    expect(inputTag.tags).to.eql(['urgent', 'backend'])
+  })
+
+  it('falls back to the current tags when the restored state is the coerced "[object Object]"', async () => {
+    const inputTag = await setupInputTag(`
+      <form><input-tag name="labels[]" multiple>
+        <tag-option value="keep">keep</tag-option>
+      </input-tag></form>
+    `)
+    await waitForUpdate()
+
+    inputTag.formStateRestoreCallback('[object Object]')
+    await waitForUpdate()
+
+    expect(inputTag.tags).to.eql(['keep'])
+  })
+})

data/lib/bard/tag_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module TagField
-    VERSION = "0.7.3"
+    VERSION = "0.7.4"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-tag_field
 version: !ruby/object:Gem::Version
-  version: 0.7.3
+  version: 0.7.4
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-08-13 00:00:00.000000000 Z
+date: 2026-09-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -177,6 +177,7 @@ files:
 - input-tag/test/edge-cases.test.js
 - input-tag/test/events.test.js
 - input-tag/test/form-integration.test.js
+- input-tag/test/form-state-restore.test.js
 - input-tag/test/input-tag.test.js
 - input-tag/test/lib/fail-only.mjs
 - input-tag/test/lib/test-utils.js