diff --git a/src/elements/stream_element.ts b/src/elements/stream_element.ts index e0213f97d..f3dcf7a90 100644 --- a/src/elements/stream_element.ts +++ b/src/elements/stream_element.ts @@ -73,10 +73,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.ts b/src/tests/unit/stream_element_tests.ts index ffef5212d..2fc6910c2 100644 --- a/src/tests/unit/stream_element_tests.ts +++ b/src/tests/unit/stream_element_tests.ts @@ -67,6 +67,27 @@ test("test action=append with children ID already present in target", async () = assert.equal(subject.find("#hello")?.textContent, "Hello Turbo tail1 New First Second tail2 ") }) +test("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("test action=prepend", async () => { const element = createStreamElement("prepend", "hello", createTemplateElement("Streams ")) const element2 = createStreamElement("prepend", "hello", createTemplateElement("and more ")) @@ -106,6 +127,27 @@ test("test action=prepend with children ID already present in target", async () assert.equal(subject.find("#hello")?.textContent, "New First Second tail2 tail1 Hello Turbo") }) +test("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("test action=remove", async () => { const element = createStreamElement("remove", "hello") assert.ok(subject.find("#hello"))