phlex-reactive 0.11.2 → 0.11.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac1f001e762b40825811633d86a7cb9e050b85d32a7f7c11a44196b48f486af6
-  data.tar.gz: a969a678bf9f0d293b953529f9c31eb4871263dc391477e4301d3fedd5cec6fb
+  metadata.gz: dec3134e528500e32143217e96b93da16da30322cdf883017db367f645ab1c7d
+  data.tar.gz: ff6d5f992ea6cb7a5558a447f4256b9885170e4e27e1171c62ecf9c92ac221f6
 SHA512:
-  metadata.gz: 8378be9d18bd169e2f78dfbd5171931e952ecbb875c74df0ba5328518ea0a74c641e7840807a7d6eb216d647ecd0daa6f32cdf70468d049e6ed47fa2d0169903
-  data.tar.gz: 7ec7fb3754b137191feb9d38dca9ef9b14b6993da9909dd10ea0f25b661660259c3839b4fa011982dec206d687b765b0a70e7d762ca62c09ed22cbf7f055dba0
+  metadata.gz: 8952c2437efb9f8d3d8dafd86c2a09658a178ed657e2e4c632a45bc3be17f965f38d518348dd4b8c17609e7937a1793474b40e68db208cec83ef6f50ce28e4c3
+  data.tar.gz: aaddf4f15bd7aa7da26f74e4aca681e4c07c0c3baee62bb9107baf8ea5ab5e244a80b84baeec14fdad79935bede5bb0cf00d7796d4c82eac0f01ace5f916371a

data/CHANGELOG.md

@@ -8,6 +8,26 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- **`reactive_tags` — the tag-chip input primitive (#203).** The composed
+  combobox/tags widget (preload suggestions, type to narrow, Enter/click to add,
+  remove chips) with zero bespoke JavaScript and zero round trips. The value is
+  FORM state in a hidden **comma-joined** field the root names
+  (`reactive_tags(:tags)`, scope-aware like `reactive_filter`); the chip list is
+  a client projection of that field, rebuilt per change by cloning a
+  server-owned `<template>` chip (`textContent` writes only — never
+  `innerHTML`). Three client-only triggers: `reactive_tags_add` (Enter adds the
+  typed text — composed after `reactive_listnav`, a highlighted option wins and
+  Enter never submits the enclosing form), `reactive_tags_option(tag)` (click a
+  suggestion to add its declared tag), `reactive_tags_remove(tag)` (a chip's
+  remove button; no arg inside the template — the client fills it per chip).
+  Tags dedupe case-insensitively; a comma-separated paste splits; a declared tag
+  containing a comma raises at render. Selected suggestions hide + mark
+  `data-reactive-tags-selected` (`reactive_filter` keeps them hidden through
+  re-filters) and resurface on removal; a morph re-projects the chips from the
+  field's server value; every write dispatches a real `input` event on the
+  hidden field so `reactive_dirty`/`reactive_show`/`reactive_compute` see it.
+  Works in a token-less `ClientBindings` component — nothing here POSTs.
+
 - **A global reactive-activity signal — the analogue of Turbo's progress bar (#201).**
   The client now maintains a document-level count of in-flight reactive operations
   across ALL roots — incremented when a dispatch round trip or a deferred render
@@ -47,6 +67,16 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- **`have_reactive_value` now reads the field's `.value` property, so it can verify a
+  reducer-set disabled/computed field (#204).** The matcher (added in #201) delegated to
+  Capybara's `have_field(with:)`, which matches the value **attribute** — but a
+  `reactive_compute` reducer paints a computed output by setting its JS `.value`
+  **property** (`el.value = …`), and for a **disabled / read-only** output the attribute
+  never reflects that. So the matcher read `""` and failed on exactly the fields it was
+  built for. It now re-resolves the field by id **or name** each poll and asserts the live
+  `.value` property (via `evaluate_script`), covering enabled AND disabled/computed fields
+  while keeping the morph-immunity. `have_reactive_text` (textContent) was unaffected.
+
 - **A freshly-rendered `reactive_compute` root now self-seeds its derived fields on connect (#199).**
   Before, a compute root computed nothing until the first user `input` — a fresh render
   (or a server validation-error re-render that replaced the body) left every derived

data/README.md

@@ -390,6 +390,8 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | `reactive_show_targets(:field, "#id" => value)` | **Cross-root visibility**: the component that owns the field declares which **outside**, id-allowlisted elements it governs (a nav tab, a panel in another pane) — the visibility parallel of `mirror:`. Spread on the **root** via `mix(reactive_root, …)`, **once per root** — several fields go in one call via the hash form. The value uses the same `where`-style vocabulary (`"advanced"`, `%w[a b]`, `10..`). Id selectors only (raise at render + client warn-skip); toggles `hidden` only. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
 | `reactive_filter(:field, option: nil, group: nil, empty: nil)` | **Client-side option filtering** for a preloaded combobox: spread onto the root and name the **field** that drives it — `reactive_filter(:q)` compiles `:q` to `[name="q"]` (scope-aware) and typing shows/hides the options by their `data-reactive-filter-text` haystack, **zero round trips**. `option:` defaults to `[role=option]`; optional `group:` collapses an all-hidden group header; `empty:` reveals a no-matches node. See [Client-side option filtering](#client-side-option-filtering-reactive_filter). |
 | `reactive_listnav("[role=option]")` | The **standalone** combobox keyboard wiring (Arrow/Enter/Escape) for an input that fires **no action** — the preload-and-filter case. Same behavior as `on(…, listnav:)`, minus the POST. |
+| `reactive_tags(:tags)` | **Tag-chip input** (the combobox/tags widget): spread onto the root and name the hidden field that stores the **comma-joined** value — the client maintains that field + the chip list entirely client-side (form state, zero round trips), rebuilding chips from your server-owned `<template>`. Composes with `reactive_filter` (type to narrow) and `reactive_listnav` (Enter picks the highlighted option). See [Tag-chip input](#tag-chip-input-reactive_tags). |
+| `reactive_tags_add` / `reactive_tags_option(tag)` / `reactive_tags_remove(tag)` | The tags triggers, all **client-only**: `reactive_tags_add` on the query input adds the typed text on Enter (mix it **after** `reactive_listnav`; Enter never submits the enclosing form); `reactive_tags_option` makes a preloaded suggestion add its declared tag on click; `reactive_tags_remove` is a chip's remove button (no arg inside the template — the client fills the tag per chip). |
 | `reactive_compute :name, inputs: { title: :string, qty: :number }, outputs:` | **Typed** inputs: a `:string` reaches the JS reducer raw, a `:number` is coerced through `Number`. The array form (`inputs: %i[a b]`) stays all-numeric; the **permit-style** form (`inputs: [:qty, title: :string]`) mixes both — bare symbols default `:number`, a trailing hash types the exceptions. `outputs:` is the field allowlist; a reducer-result key also paints any owned `reactive_text` node by presence and any `mirror:` id, so an `outputs:` entry that exists only to reach a text node is redundant (harmless — a widening). |
 | `reactive_compute :name, ..., mirror: { sum: "#summary-sum" }` | **Cross-root text mirrors**: paint a compute value into declared, id-allowlisted nodes **outside** the reactive root (a recap in another tab pane) via `textContent` — no bespoke listener. See [Cross-root mirrors](#cross-root-mirrors-mirror--painting-a-recap-outside-the-root). |
 | `reactive_dirty` / `reactive_dirty warn_unsaved: true` / `reactive_dirty only: %i[...]` | **Dirty tracking**, declared once at the class level, against the DOM's own `defaultValue`/`defaultChecked`/`defaultSelected` — no client state. Marks changed fields + the root `data-reactive-dirty`; `warn_unsaved:` arms a `beforeunload`/`turbo:before-visit` guard; `only:` scopes tracking to named fields. Style with `[data-reactive-dirty]`. See [Dirty-field tracking](#dirty-field-tracking-reactive_dirty). |
@@ -1194,6 +1196,62 @@ stays its own signed `on(:select)` trigger. Only *filtering* is client-side —
 selection still round-trips as a real signed action. Blank selectors raise at
 render: a dead binding must fail loudly, not no-op in the browser.
 
+### Tag-chip input (`reactive_tags`)
+
+The composed combobox/tags widget: preload suggestions, type to narrow, Enter or
+click to add, remove chips — the classic bespoke `tags` Stimulus controller,
+gone. The value is **form state** (like text in an input), never component
+state: it lives in a hidden **comma-joined** field inside your form, the client
+maintains it with **zero round trips**, and the surrounding form submit carries
+it to the server (`tags.split(",")` on your side). Because nothing here needs a
+signed action, the widget works in a token-less `ClientBindings` component too.
+
+```ruby
+div(**mix(reactive_root, reactive_tags(:tags), reactive_filter(:tag_query))) do
+  input(type: :hidden, **reactive_field(:tags), value: @post.tags.join(","))
+
+  div(data: { reactive_tags_list: true }) do        # chips render here
+    @post.tags.each { chip(it) }                    # server-rendered first paint
+  end
+  template(data: { reactive_tags_template: true }) { chip }  # the chip markup, server-owned
+
+  # listnav FIRST, tags_add second: Enter picks the highlighted option;
+  # free text adds only when nothing is highlighted. Never submits the form.
+  input(name: "tag_query", **mix(reactive_listnav, reactive_tags_add))
+
+  SUGGESTIONS.each do |tag, haystack|
+    button(**mix(reactive_tags_option(tag),          # click → add (client-only)
+      data: { reactive_filter_text: haystack })) { tag }
+  end
+end
+
+# One chip method serves both forms: with a tag it's the server-rendered chip,
+# without it's the template prototype (the client fills text + remove param).
+def chip(tag = nil)
+  span(class: "chip", data: { reactive_tag: tag }) do
+    span(data: { reactive_tag_text: true }) { tag }
+    button(**(tag ? reactive_tags_remove(tag) : reactive_tags_remove)) { "×" }
+  end
+end
+```
+
+The chip list is a **client projection of the hidden field** — the field is the
+single source of truth. Every change re-clones your `<template>` per tag,
+writing the tag through `textContent` only (never `innerHTML` — the XSS-safe
+`reactive_text` posture) and stamping the remove button's tag param. Tags dedupe
+case-insensitively (first casing wins); a comma-separated paste splits into
+individual tags; a declared tag containing a comma **raises at render** (it
+would corrupt the joined value). An already-selected suggestion is hidden and
+marked `data-reactive-tags-selected` — `reactive_filter` keeps it hidden through
+re-filters — and resurfaces when its chip is removed. A server re-render/morph
+re-projects the chips from the field's fresh server value, and each write
+dispatches a real `input` event on the hidden field, so `reactive_dirty`,
+`reactive_show`, and `reactive_compute` all see it.
+
+The styled, form-builder-integrated version of this widget (label/errors/
+theming) belongs in your form layer — these helpers are deliberately the
+unstyled primitives, like `reactive_filter` before them.
+
 **Combining `on(...)` / `reactive_attrs` with your own attributes.** Both return
 a hash that includes a `data:` key. Spreading them *and* passing another `data:`
 (or `class:`, `id:`) would clobber it — use Phlex's `mix` to deep-merge. For the

data/app/javascript/phlex/reactive/reactive_controller.js

@@ -1131,6 +1131,12 @@ export default class extends Controller {
   // Option filtering (issue #163): the ONE delegated sync handler shared by the
   // root's input/turbo:morph-element listeners, held for teardown.
   #boundSyncFilter
+  // Tag-chip input (issue #203): the bound re-projection attached to
+  // turbo:morph-element (a morph rewrites the hidden field to server truth, so
+  // the chip projection must follow), held for teardown — plus the once-only
+  // missing-template warning latch.
+  #boundSyncTags
+  #tagsWarnedTemplate = false
   // Connect-time compute seed (issue #199): the bound re-seed attached to
   // turbo:morph-element so an in-place morph re-runs the compute, held for teardown.
   #boundSeedCompute
@@ -1240,6 +1246,21 @@ export default class extends Controller {
       this.#syncFilter()
     }
 
+    // Tag-chip input (issue #203) — ONLY when the root names the hidden value
+    // field (reactive_tags), so a component without one pays one attribute
+    // read. The chip list is a CLIENT PROJECTION of the hidden field's
+    // comma-joined value: connect seeds it (a plain replace re-connects with
+    // the server-rendered value), and turbo:morph-element re-projects after an
+    // in-place morph (the morph wrote server truth into the hidden field while
+    // the chips DOM kept the pre-morph projection). Registered AFTER the
+    // filter's listeners so a morph re-filters first and the tags pass then
+    // re-marks selected options on the fresh visibility state.
+    if (this.#tagsEnabled()) {
+      this.#boundSyncTags = () => this.#syncTags()
+      this.element.addEventListener?.("turbo:morph-element", this.#boundSyncTags)
+      this.#syncTags()
+    }
+
     // Connect-time compute seed (issue #199) — ONLY when the root carries a
     // reactive_compute binding that opts in (data-reactive-compute-seed). A
     // freshly-rendered compute root (a first paint, or a server validation-error
@@ -1291,6 +1312,7 @@ export default class extends Controller {
     this.#teardownDirtyTracking()
     this.#teardownShowSync()
     this.#teardownFilterSync()
+    this.#teardownTagsSync()
     this.#teardownComputeSeed()
     if (this.#boundProbeLazyDefer) {
       this.element.removeEventListener?.("turbo:morph-element", this.#boundProbeLazyDefer)
@@ -1697,6 +1719,80 @@ export default class extends Controller {
     return Array.from(this.element.querySelectorAll(selector)).filter((el) => !el.hidden && owns(el))
   }
 
+  // Tag-chip input (issue #203) — the composed combobox/tags primitive. The
+  // root's data-reactive-tags-field names the hidden input that stores the
+  // COMMA-JOINED value; these three actions are its only writers. All of it is
+  // FORM state (like text in an input) — no token, no POST: the surrounding
+  // form submit carries the joined value. The chip list is re-projected from
+  // the field on every write (#syncTags), so the field stays the single source
+  // of truth.
+  //
+  // Enter on the query input: add the TYPED text — unless this Enter belongs
+  // to listnav (reactive_tags_add composes after reactive_listnav on the same
+  // keydown.enter). Two guards make the composition order-independent:
+  // defaultPrevented means listnavPick ALREADY picked the highlighted option
+  // (adding the typed text too would double-add); a still-visible highlighted
+  // option means listnavPick is ABOUT to pick it (when tagsAdd is bound
+  // first). Past the guards, Enter is OURS — preventDefault unconditionally so
+  // it can never submit the enclosing form (blank input included). A
+  // comma-separated paste splits into individual tags (the value is
+  // comma-joined, so a comma can never be part of one tag). The input clears
+  // only when something was actually added — a duplicate keeps the typed text
+  // for correction.
+  tagsAdd(event) {
+    if (!this.#tagsEnabled()) return
+    if (event?.defaultPrevented) return
+    if (this.#listnavOptions(event).some((el) => el.hasAttribute?.("data-reactive-highlighted"))) return
+    event?.preventDefault?.()
+
+    const input = event?.currentTarget ?? event?.target
+    if (!input) return
+    const added = this.#tagsAddValues(String(input.value ?? "").split(","))
+    if (!added) return
+    input.value = ""
+    if (this.#filterEnabled()) this.#syncFilter()
+  }
+
+  // Click (or listnav Enter, which CLICKS the highlighted option) on a
+  // preloaded option: add its DECLARED tag (data-reactive-tag-param — set by
+  // reactive_tags_option, never free text). After a successful add, reset the
+  // query so the next tag starts from the full list: clear the filter input,
+  // re-narrow, and hand focus back for continued typing.
+  tagsPick(event) {
+    if (!this.#tagsEnabled()) return
+    event?.preventDefault?.()
+
+    const trigger = event?.currentTarget ?? event?.target
+    const tag = trigger?.getAttribute?.("data-reactive-tag-param")
+    if (!tag) return
+    if (!this.#tagsAddValues([tag])) return
+
+    const input = this.#tagsQueryInput()
+    if (!input) return
+    input.value = ""
+    this.#syncFilter()
+    input.focus?.()
+  }
+
+  // Click on a chip's remove button: drop its tag (case-insensitive match, the
+  // dedupe convention) from the hidden value. The re-projection removes the
+  // chip and resurfaces the option. Removing an absent tag is a no-op.
+  tagsRemove(event) {
+    if (!this.#tagsEnabled()) return
+    event?.preventDefault?.()
+
+    const trigger = event?.currentTarget ?? event?.target
+    const tag = trigger?.getAttribute?.("data-reactive-tag-param")
+    if (!tag) return
+    const field = this.#tagsField()
+    if (!field) return
+
+    const tags = this.#tagsRead(field)
+    const next = tags.filter((t) => t.toLowerCase() !== tag.toLowerCase())
+    if (next.length === tags.length) return
+    this.#tagsWrite(field, next)
+  }
+
   // Parse a JSON string list from a root data attr; [] on absence/parse error so
   // a malformed binding degrades to "no fields" rather than throwing on input.
   #parseComputeList(attr) {
@@ -2891,7 +2987,11 @@ export default class extends Controller {
     for (const el of this.element.querySelectorAll(optionSelector)) {
       if (!owns(el)) continue // a nested root's option is its own controller's job
       const haystack = (el.getAttribute("data-reactive-filter-text") ?? el.textContent ?? "").toLowerCase()
-      const hidden = query !== "" && !haystack.includes(query)
+      // An option whose tag is already selected (reactive_tags, issue #203)
+      // stays hidden through every re-filter — clearing the query must not
+      // resurface an already-added tag.
+      const hidden =
+        el.hasAttribute?.("data-reactive-tags-selected") || (query !== "" && !haystack.includes(query))
       el.hidden = hidden
       if (hidden) el.removeAttribute("data-reactive-highlighted")
       else visible++
@@ -2926,6 +3026,168 @@ export default class extends Controller {
     this.#boundSyncFilter = undefined
   }
 
+  // Whether this root declares a tag-chip binding (issue #203) — the connect()
+  // gate and every tags action's first check (an action bound without the root
+  // binding is default-denied, the filter posture).
+  #tagsEnabled() {
+    return !!this.element.getAttribute?.("data-reactive-tags-field")
+  }
+
+  // The hidden input storing the comma-joined value, resolved fresh per use
+  // (a morph replaces nodes — never cache it) and OWNED by this root (issue
+  // #15). null when the selector resolves nothing — every caller then no-ops:
+  // a binding that can't resolve must never break the page.
+  #tagsField() {
+    if (typeof this.element?.querySelectorAll !== "function") return null
+    const selector = this.element.getAttribute("data-reactive-tags-field")
+    if (!selector) return null
+    const owns = this.#ownershipFilter()
+    return [...this.element.querySelectorAll(selector)].find(owns) ?? null
+  }
+
+  // Parse the field's comma-joined value into the canonical tag list: split,
+  // trim, drop blanks, dedupe case-insensitively KEEPING the first casing (the
+  // server may have stored a ragged value — the projection normalizes without
+  // rewriting the field, so we never fight server truth).
+  #tagsRead(field) {
+    const seen = new Set()
+    const tags = []
+    for (const part of String(field.value ?? "").split(",")) {
+      const tag = part.trim()
+      if (tag === "" || seen.has(tag.toLowerCase())) continue
+      seen.add(tag.toLowerCase())
+      tags.push(tag)
+    }
+    return tags
+  }
+
+  // Append any NEW tags (trimmed, non-blank, not already present under the
+  // case-insensitive dedupe) and write the field once. Returns whether
+  // anything was actually added — callers only clear the query input then.
+  #tagsAddValues(values) {
+    const field = this.#tagsField()
+    if (!field) return false
+
+    const tags = this.#tagsRead(field)
+    const seen = new Set(tags.map((tag) => tag.toLowerCase()))
+    let added = false
+    for (const value of values) {
+      const tag = String(value ?? "").trim()
+      if (tag === "" || seen.has(tag.toLowerCase())) continue
+      seen.add(tag.toLowerCase())
+      tags.push(tag)
+      added = true
+    }
+    if (added) this.#tagsWrite(field, tags)
+    return added
+  }
+
+  // The ONE writer: join, store, dispatch a real bubbling `input` on the field
+  // (the set-value + dispatch contract, issue #183 — dirty tracking,
+  // reactive_show, and compute all see the change), then re-project.
+  #tagsWrite(field, tags) {
+    field.value = tags.join(",")
+    if (typeof field.dispatchEvent === "function") {
+      field.dispatchEvent(new Event("input", { bubbles: true }))
+    }
+    this.#syncTags()
+  }
+
+  // The query input the tags widget resets after a pick — the SAME input that
+  // drives reactive_filter (a tags widget without filtering has none; the
+  // caller then skips the reset).
+  #tagsQueryInput() {
+    if (typeof this.element?.querySelectorAll !== "function") return null
+    const selector = this.element.getAttribute("data-reactive-filter-input")
+    if (!selector) return null
+    const owns = this.#ownershipFilter()
+    return [...this.element.querySelectorAll(selector)].find(owns) ?? null
+  }
+
+  // Re-project the hidden field into the DOM (issue #203): rebuild the chip
+  // list from the <template> and mark/hide the options whose tag is already
+  // selected. The field is the single source of truth — this never writes it.
+  #syncTags() {
+    const field = this.#tagsField()
+    if (!field) return
+    const tags = this.#tagsRead(field)
+    const owns = this.#ownershipFilter()
+    this.#tagsRenderChips(tags, owns)
+    this.#tagsMarkOptions(tags, owns)
+  }
+
+  // Rebuild the chip list: clear the container and clone one chip per tag from
+  // the server-owned template. The tag lands in the clone's
+  // [data-reactive-tag-text] node via textContent (XSS-safe by construction —
+  // never innerHTML, the reactive_text posture), and every tagsRemove trigger
+  // in the clone gets the tag as its param. A missing list is a chip-less
+  // widget (fine — the value still maintains); a missing/empty template warns
+  // ONCE (a half-built binding should be loud, but never per-keystroke).
+  #tagsRenderChips(tags, owns) {
+    const list = [...this.element.querySelectorAll("[data-reactive-tags-list]")].find(owns)
+    if (!list) return
+
+    const template = [...this.element.querySelectorAll("[data-reactive-tags-template]")].find(owns)
+    const chipProto = template?.content?.firstElementChild
+    if (!chipProto) {
+      if (!this.#tagsWarnedTemplate) {
+        console.warn(
+          "[phlex-reactive] reactive_tags: no chip <template data-reactive-tags-template> found in this root — " +
+            "chips will not render (the hidden field still updates). Add a template with a " +
+            "[data-reactive-tag-text] node and a reactive_tags_remove button."
+        )
+        this.#tagsWarnedTemplate = true
+      }
+      return
+    }
+
+    while (list.firstChild) list.removeChild(list.firstChild)
+    for (const tag of tags) {
+      const chip = chipProto.cloneNode(true)
+      chip.setAttribute?.("data-reactive-tag", tag)
+      const sink = chip.matches?.("[data-reactive-tag-text]")
+        ? chip
+        : (chip.querySelectorAll?.("[data-reactive-tag-text]") ?? [])[0]
+      if (sink) sink.textContent = tag
+      const removers = [...(chip.querySelectorAll?.('[data-action*="reactive#tagsRemove"]') ?? [])]
+      if (chip.matches?.('[data-action*="reactive#tagsRemove"]')) removers.push(chip)
+      for (const remover of removers) remover.setAttribute?.("data-reactive-tag-param", tag)
+      list.appendChild(chip)
+    }
+  }
+
+  // Hide + mark every owned option whose DECLARED tag is already selected
+  // (data-reactive-tags-selected — #syncFilter keeps it hidden through
+  // re-filters), and resurface an option WE hid when its tag is removed. Only
+  // marker-carrying options are un-hidden — an option hidden by the filter or
+  // the server stays as-is. With a filter bound, one final #syncFilter re-folds
+  // groups/empty against the new selected set.
+  #tagsMarkOptions(tags, owns) {
+    const selected = new Set(tags.map((tag) => tag.toLowerCase()))
+    for (const el of this.element.querySelectorAll("[role=option]")) {
+      if (!owns(el)) continue
+      const tag = el.getAttribute?.("data-reactive-tag-param")
+      if (!tag) continue
+      if (selected.has(tag.toLowerCase())) {
+        el.setAttribute("data-reactive-tags-selected", "true")
+        el.hidden = true
+        el.removeAttribute?.("data-reactive-highlighted")
+      } else if (el.hasAttribute?.("data-reactive-tags-selected")) {
+        el.removeAttribute("data-reactive-tags-selected")
+        if (!this.#filterEnabled()) el.hidden = false
+      }
+    }
+    if (this.#filterEnabled()) this.#syncFilter()
+  }
+
+  // Remove the tags morph listener on disconnect, so a stray morph event after
+  // the element leaves the DOM never re-projects against a detached root.
+  #teardownTagsSync() {
+    if (!this.#boundSyncTags) return
+    this.element.removeEventListener?.("turbo:morph-element", this.#boundSyncTags)
+    this.#boundSyncTags = undefined
+  }
+
   // Remove the compute seed morph listener on disconnect (issue #199), so a
   // stray turbo:morph-element after the element leaves the DOM never re-seeds
   // against a detached root.