diff --git a/src/elements/stream_element.js b/src/elements/stream_element.js index 77f447594..b5faee4b6 100644 --- a/src/elements/stream_element.js +++ b/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"))) } /** diff --git a/src/tests/unit/stream_element_tests.js b/src/tests/unit/stream_element_tests.js index 455581607..3590ee343 100644 --- a/src/tests/unit/stream_element_tests.js +++ b/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('
tail1 ') + ) + const element2 = createStreamElement( + "append", + "hello", + createTemplateElement( + '
tail2 ' + ) + ) + assert.equal(subject.find("#hello")?.textContent, "Hello Turbo") + + subject.append(element) + await nextAnimationFrame() + + assert.equal(subject.find("#hello")?.innerHTML, 'Hello Turbo
tail1 ') + assert.isNull(element.parentElement) + + subject.append(element2) + await nextAnimationFrame() + + assert.equal(subject.find("#hello")?.innerHTML, 'Hello Turbo tail1
tail2 ') +}) + test("action=append with children ID already present in target", async () => { const element = createStreamElement("append", "hello", createTemplateElement('
First
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('
tail1 ')) + const element2 = createStreamElement( + "prepend", + "hello", + createTemplateElement( + '
tail2 ' + ) + ) + assert.equal(subject.find("#hello")?.textContent, "Hello Turbo") + + subject.append(element) + await nextAnimationFrame() + + assert.equal(subject.find("#hello")?.innerHTML, '
tail1 Hello Turbo') + assert.isNull(element.parentElement) + + subject.append(element2) + await nextAnimationFrame() + + assert.equal(subject.find("#hello")?.innerHTML, '
tail2 tail1 Hello Turbo') +}) + test("action=prepend with children ID already present in target", async () => { const element = createStreamElement("prepend", "hello", createTemplateElement('
First
tail1 ')) const element2 = createStreamElement(