Merge pull request #384 from opf/bug/68698-form-state-is-not-initialized-when-rendering-a-tree-view-with-already-selected-items

[68698] Form state is not initialized when rendering a tree view with already selected items

Author: HDinger

.changeset/brave-horses-pump.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Initiate form state for TreeView

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark.png

@@ -45,26 +45,7 @@ export class TreeViewElement extends HTMLElement {
 
       if (!somethingChanged) return
 
-      const newInputs = []
-
-      // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
-      for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
-        const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
-        newInput.removeAttribute('data-target')
-        newInput.removeAttribute('form')
-
-        const payload: {path: string[]; value?: string} = {
-          path: this.getNodePath(node),
-        }
-
-        const inputValue = this.getFormInputValueForNode(node)
-        if (inputValue) payload.value = inputValue
-
-        newInput.value = JSON.stringify(payload)
-        newInputs.push(newInput)
-      }
-
-      this.formInputContainer.replaceChildren(...newInputs)
+      this.updateHiddenFormInputs()
     })
 
     updateInputsObserver.observe(this, {
@@ -73,6 +54,11 @@ export class TreeViewElement extends HTMLElement {
       attributeFilter: ['aria-checked'],
     })
 
+    // Correctly initialize the form
+    if (this.formInputContainer) {
+      this.updateHiddenFormInputs()
+    }
+
     // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
     customElements.whenDefined('tree-view-sub-tree-node').then(() => {
       // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
@@ -483,6 +469,29 @@ export class TreeViewElement extends HTMLElement {
   selectVariant(node: Element): SelectVariant {
     return (node.getAttribute('data-select-variant') || 'none') as SelectVariant
   }
+
+  updateHiddenFormInputs() {
+    const newInputs = []
+
+    // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+    for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+      const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
+      newInput.removeAttribute('data-target')
+      newInput.removeAttribute('form')
+
+      const payload: {path: string[]; value?: string} = {
+        path: this.getNodePath(node),
+      }
+
+      const inputValue = this.getFormInputValueForNode(node)
+      if (inputValue) payload.value = inputValue
+
+      newInput.value = JSON.stringify(payload)
+      newInputs.push(newInput)
+    }
+
+    this.formInputContainer.replaceChildren(...newInputs)
+  }
 }
 
 if (!window.customElements.get('tree-view')) {

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_menu/multiple_selected_items/dark_colorblind.png

@@ -2,7 +2,7 @@
   <%= render(Primer::Alpha::Stack.new) do %>
     <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
       <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, value: 0) do |sub_tree| %>
-        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1) %>
+        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1, checked: true) %>
         <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2) %>
       <% end %>