Set form_name_root to unique values when creating editors

Author: matthiask

CHANGELOG.rst

@@ -5,6 +5,8 @@ Next version
 ~~~~~~~~~~~~
 
 - Fixed the initialization of the JSON editor when we start with null values.
+- Changed the ID attributes of generated elements to hopefully be unique by
+  using a unique ``form_name_root`` per editor instance.
 
 
 0.7 (2025-09-05)

django_json_schema_editor/static/django_json_schema_editor/widget.js

@@ -19,6 +19,8 @@ document.addEventListener("DOMContentLoaded", () => {
   })
 })
 
+let editorIndex = 0
+
 const initEditor = (el) => {
   if (el.dataset.foreignKey) {
     Object.assign(window.__djse_foreignKeys, JSON.parse(el.dataset.foreignKey))
@@ -32,6 +34,9 @@ const initEditor = (el) => {
     config.startval = value
   }
 
+  // Set an unique name so that form widgets get somewhat more unique names
+  config.form_name_root = `djse${++editorIndex}`
+
   const editor = new JSONEditor(el, config)
   editor.on("change", () => {
     input.value = JSON.stringify(editor.getValue())

tests/testapp/test_json_editor.py

@@ -83,7 +83,7 @@ def test_json_editor_prose(page, live_server):
     expect(editor_container).to_be_visible()
 
     # Check for the text field using the exact ID from the HTML
-    text_input = page.locator('input[id="root[text]"]')
+    text_input = page.locator('input[id*="[text]"]')
     expect(text_input).to_be_visible()
     expect(text_input).to_have_value("Hello World")
 
@@ -118,7 +118,7 @@ def test_json_editor_edit_save(page, live_server):
     page.wait_for_timeout(1000)  # Wait for editor to initialize
 
     # Edit the regular text field
-    text_input = page.locator('input[id="root[text]"]')
+    text_input = page.locator('input[id*="[text]"]')
     expect(text_input).to_be_visible()
     text_input.fill("Updated text")
 
@@ -140,7 +140,7 @@ def test_json_editor_edit_save(page, live_server):
     page.wait_for_timeout(1000)
 
     # Verify text field was updated
-    text_input = page.locator('input[id="root[text]"]')
+    text_input = page.locator('input[id*="[text]"]')
     expect(text_input).to_have_value("Updated text")
 
     # Verify prose field was updated
@@ -173,7 +173,7 @@ def test_json_editor_display(page, live_server):
     page.wait_for_timeout(1000)
 
     # Verify that text field displays our test data
-    text_input = page.locator('input[id="root[text]"]')
+    text_input = page.locator('input[id*="[text]"]')
     expect(text_input).to_be_visible()
     expect(text_input).to_have_value("Test text field")
 
@@ -205,7 +205,7 @@ def test_json_editor_ui_elements(page, live_server):
     expect(page.locator(".prose-menubar__button[title='underline']")).to_be_visible()
 
     # Verify the text editor field is present
-    text_input = page.locator('input[id="root[text]"]')
+    text_input = page.locator('input[id*="[text]"]')
     expect(text_input).to_be_visible()
 
     # Focus on the prose editor