Merge pull request #880 from ethancrawford/fix-append-duplicate-forms

Use getAttribute to find duplicate ids, not the id property

src/elements/stream_element.js

@@ -69,10 +69,10 @@ export class StreamElement extends HTMLElement {
    * Gets the list of duplicate children (i.e. those with the same ID)
    */
   get duplicateChildren() {
-    const existingChildren = this.targetElements.flatMap((e) => [...e.children]).filter((c) => !!c.id)
-    const newChildrenIds = [...(this.templateContent?.children || [])].filter((c) => !!c.id).map((c) => c.id)
+    const existingChildren = this.targetElements.flatMap((e) => [...e.children]).filter((c) => !!c.getAttribute("id"))
+    const newChildrenIds = [...(this.templateContent?.children || [])].filter((c) => !!c.getAttribute("id")).map((c) => c.getAttribute("id"))
 
-    return existingChildren.filter((c) => newChildrenIds.includes(c.id))
+    return existingChildren.filter((c) => newChildrenIds.includes(c.getAttribute("id")))
   }
 
   /**

src/tests/unit/stream_element_tests.js

@@ -49,6 +49,33 @@ test("action=append", async () => {
   assert.isNull(element2.parentElement)
 })
 
+test("action=append with a form template containing an input named id", async () => {
+  const element = createStreamElement(
+    "append",
+    "hello",
+    createTemplateElement(' <form id="child_1"><input type="hidden" name="id" value="First"></form> tail1 ')
+  )
+  const element2 = createStreamElement(
+    "append",
+    "hello",
+    createTemplateElement(
+      '<form id="child_1"><input type="hidden" name="id" value="New First"></form> <form id="child_2"><input type="hidden" name="id" value="Second"></form> tail2 '
+    )
+  )
+  assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
+
+  subject.append(element)
+  await nextAnimationFrame()
+
+  assert.equal(subject.find("#hello")?.innerHTML, 'Hello Turbo <form id="child_1"><input type="hidden" name="id" value="First"></form> tail1 ')
+  assert.isNull(element.parentElement)
+
+  subject.append(element2)
+  await nextAnimationFrame()
+
+  assert.equal(subject.find("#hello")?.innerHTML, 'Hello Turbo  tail1 <form id="child_1"><input type="hidden" name="id" value="New First"></form> <form id="child_2"><input type="hidden" name="id" value="Second"></form> tail2 ')
+})
+
 test("action=append with children ID already present in target", async () => {
   const element = createStreamElement("append", "hello", createTemplateElement(' <div id="child_1">First</div> tail1 '))
   const element2 = createStreamElement(
@@ -88,6 +115,29 @@ test("action=prepend", async () => {
   assert.isNull(element.parentElement)
 })
 
+test("action=prepend with a form template containing an input named id", async () => {
+  const element = createStreamElement("prepend", "hello", createTemplateElement('<form id="child_1"><input type="hidden" name="id" value="First"></form> tail1 '))
+  const element2 = createStreamElement(
+    "prepend",
+    "hello",
+    createTemplateElement(
+      '<form id="child_1"><input type="hidden" name="id" value="New First"></form> <form id="child_2"><input type="hidden" name="id" value="Second"></form> tail2 '
+    )
+  )
+  assert.equal(subject.find("#hello")?.textContent, "Hello Turbo")
+
+  subject.append(element)
+  await nextAnimationFrame()
+
+  assert.equal(subject.find("#hello")?.innerHTML, '<form id="child_1"><input type="hidden" name="id" value="First"></form> tail1 Hello Turbo')
+  assert.isNull(element.parentElement)
+
+  subject.append(element2)
+  await nextAnimationFrame()
+
+  assert.equal(subject.find("#hello")?.innerHTML, '<form id="child_1"><input type="hidden" name="id" value="New First"></form> <form id="child_2"><input type="hidden" name="id" value="Second"></form> tail2  tail1 Hello Turbo')
+})
+
 test("action=prepend with children ID already present in target", async () => {
   const element = createStreamElement("prepend", "hello", createTemplateElement('<div id="child_1">First</div> tail1 '))
   const element2 = createStreamElement(