Do not esacpe special characters in node data-path attributes. Otherwise, the JS controller won't find them.

Author: HDinger

.changeset/clear-cooks-mix.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Support special characters in node names of Primer::Alpha::TreeView

app/components/primer/alpha/tree_view/node.rb

@@ -129,7 +129,7 @@ def initialize(
             @content_arguments, {
             data: {
               value: value,
-              path: @path.to_json,
+              path: JSON.generate(@path),
               select_variant: @select_variant
             }
           }

previews/primer/alpha/tree_view_preview/form_input.html.erb

@@ -7,6 +7,10 @@
       <% end %>
 
       <% tree.with_leaf(label: "action_menu.rb", select_variant: select_variant, value: 3) %>
+      <% tree.with_sub_tree(label: "Docs & legal requirements", select_variant: select_variant, value: 4) do |sub_tree| %>
+        <% sub_tree.with_leaf(label: "Readme.md", select_variant: select_variant, value: 5) %>
+        <% sub_tree.with_leaf(label: "Copyright.md", select_variant: select_variant, value: 6) %>
+      <% end %>
     <% end %>
 
     <%= render(Primer::Alpha::SubmitButton.new(name: :submit, label: "Submit")) %>

test/system/alpha/tree_view_test.rb

@@ -885,5 +885,20 @@ def test_initial_form_state_for_single_select
 
       assert_equal "{\"path\":[\"src\",\"button.rb\"],\"value\":\"1\"}", response.dig("form_params", "folder_structure", 0)
     end
+
+    def test_single_select_with_special_character
+      visit_preview(:form_input, expanded: true, select_variant: :single, route_format: :json)
+
+      assert_path_checked "src", "button.rb"
+      activate_at_path("Docs & legal requirements")
+      assert_path_checked "Docs & legal requirements"
+
+      find("button[type=submit]").click
+
+      # for some reason the JSON response is wrapped in HTML, I have no idea why
+      response = JSON.parse(find("pre").text)
+
+      assert_equal "{\"path\":[\"Docs & legal requirements\"],\"value\":\"4\"}", response.dig("form_params", "folder_structure", 0)
+    end
   end
 end

test/test_helpers/tree_view_helpers.rb

@@ -3,7 +3,7 @@
 module Primer
   module TreeViewHelpers
     def selector_for(*path)
-      "[role=treeitem][data-path='#{path.to_json}']"
+      "[role=treeitem][data-path='#{JSON.generate(path)}']"
     end
 
     def activate_at_path(*path)