Potential memory leak: Teleported elements nested inside two x-ifs are not properly removed

[mgschoen]

Elements that are x-teleport-ed but also nested inside an x-if should get removed from the DOM, once the condition for the x-if becomes falsy. If the following conditions are met however they remain in the DOM:

1. x-teleport is nested inside exactly two x-ifs
2. there exists at least one element between the outer and the inner x-if
3. the inner x-if depends on values that are defined inside the outer x-if (edit: @ekwoka clarified that this doesn't matter)

Minimal example:

<template x-if="showOuter">
    <div x-data>
        <template x-if="true">
            <template x-teleport="#some-other-element">
                <!-- will not be removed from `#some-other-element` when `showOuter` becomes false -->
                <div>Teleported Item</div>
            </template>
        </template>
    </div>
</template>

This leads to the teleported element being duplicated every time x-if becomes truthy again.

I've reproduced the issue here: https://codepen.io/mgschoen/pen/zYVOZbm

[ekwoka]

You need to have intermediary elements between template tags.

Does this continue with that being the case?

edit: verified

To add some clarify, if the inner if is true, and the outer is made false, the ifs cleanup, but not the template.

The x-data between the two x-ifs also does not matter

[mgschoen]

Thanks for confirming! You're right, it doesn't matter what scope the inner x-if depends on. What does matter though is that there is an x-data between the two x-ifs.

Updated my initial post accordingly.

[ekwoka]

In my tests, that did not matter whether it was there or not.

[mgschoen]

Ah true, my bad. Still broken without the x-data. It works if you leave out the intermediate elements entirely though.

[ekwoka]

interesting, that's more of a happy accident. since the templates should have other elements as their children...