[DREAM-808] Fixes removed checked node form state

https://community.openproject.org/wp/DREAM-808

Extends the childList guard to inspect removed nodes symmetrically
with added ones, so removing a checked tree item also rebuilds the
hidden form inputs instead of leaving a stale input that submits the
deleted node's value. Extracts the shared check into a private
helper.

Also passes attributeOldValue: true to the observer so the existing
oldValue comparison actually filters out same-value aria-checked
rewrites instead of rebuilding the inputs on every write.

Adds a browser regression test removing a checked node from a
connected tree, and a changeset for the insertion and removal fixes.

Author: myabc

.changeset/tree-view-form-state-dynamic-nodes.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Fix TreeView hidden form inputs falling out of sync when checked nodes are inserted or removed after the component connects.

app/components/primer/alpha/tree_view/tree_view.ts

@@ -39,14 +39,7 @@ export class TreeViewElement extends HTMLElement {
       // looping, so we make sure something actually changed before computing inputs again.
       const somethingChanged = mutations.some(m => {
         if (m.type === 'childList') {
-          return [...m.addedNodes].some(node => {
-            if (!(node instanceof Element)) return false
-
-            return (
-              node.matches('[role=treeitem][aria-checked=true]') ||
-              Boolean(node.querySelector('[role=treeitem][aria-checked=true]'))
-            )
-          })
+          return this.#containsCheckedTreeItem(m.addedNodes) || this.#containsCheckedTreeItem(m.removedNodes)
         }
 
         if (!(m.target instanceof HTMLElement)) return false
@@ -62,6 +55,7 @@ export class TreeViewElement extends HTMLElement {
       childList: true,
       subtree: true,
       attributeFilter: ['aria-checked'],
+      attributeOldValue: true,
     })
 
     // Correctly initialize the form
@@ -76,6 +70,17 @@ export class TreeViewElement extends HTMLElement {
     })
   }
 
+  #containsCheckedTreeItem(nodes: NodeList): boolean {
+    return [...nodes].some(node => {
+      if (!(node instanceof Element)) return false
+
+      return (
+        node.matches('[role=treeitem][aria-checked=true]') ||
+        Boolean(node.querySelector('[role=treeitem][aria-checked=true]'))
+      )
+    })
+  }
+
   rootLeafNodes(): NodeListOf<HTMLElement> {
     return this.querySelectorAll(':scope > ul > li > .TreeViewItemContainer [role=treeitem]')
   }

test/system/alpha/tree_view_test.rb

@@ -978,6 +978,27 @@ def test_form_state_updates_when_checked_nodes_are_inserted
       assert_includes response.dig("form_params", "folder_structure"), "{\"path\":[\"async.rb\"]}"
     end
 
+    def test_form_state_updates_when_checked_nodes_are_removed
+      visit_preview(:form_input, expanded: true, route_format: :json)
+
+      assert_selector("[data-target='tree-view.formInputContainer'] input", count: 1, visible: :all)
+
+      evaluate_multiline_script(<<~JS)
+        const tree = document.querySelector("tree-view")
+        const checkedNode = tree.querySelector("[role=treeitem][aria-checked=true]")
+
+        checkedNode.closest("li").remove()
+      JS
+
+      assert_selector("[data-target='tree-view.formInputContainer'] input", count: 0, visible: :all)
+
+      find("button[type=submit]").click
+
+      response = JSON.parse(find("pre").text)
+
+      assert_nil response.dig("form_params", "folder_structure")
+    end
+
     def test_form_submission_with_single_select_variant
       visit_preview(:form_input, expanded: true, select_variant: :single, route_format: :json)