When state changes, nested components containing conditionals jump over other elements

[TehShrike]

Reproduced in 1.19.1.

When a template contains an if, and inside of that there is a nested component that contains another if, when the state changes the elements of the nested component will jump to the end of the containing element.

Words are difficult - reproduction at: https://svelte.technology/repl?version=1.19.1&gist=68736c878aaf7dfee6ab503df9259f46

[lukeed]

Worth pointing out that this only occurs within the nested, truthy if-block. On the example's re-render, it self-heals to Wat's up doooog ?

[TehShrike]

It's still wrong for me on every re-render - it's only on the initial render that I see the nested component rendered in the right place. No matter what I change the state to after that (toggling it between no and yes over and over again) it's always at the end of the containing element on every re-render.

[lukeed]

Hmm... I consistently see the self-healing 🤔

1. Click link --> blank page
2. Select Nested.html in file dropdown --> see text
3. The setTimeout fires & issue is reproduced
4. Select App.html in file dropdown --> see Wat's up doooog ?

But yeah, without step 4, manually editing the yes/no value does not self-heal.

So it seems to be narrowed to initial render + two if conditions.

[TehShrike]

Right, I believe switching templates causes it to re-instantiate the component, same as if you'd refreshed the page. It just leaves the state (the JSON at the bottom right) the same.

Try updating the JSON manually between yes and no and it will re-render the state without re-instantiating the component, and you'll see that the issue remains.

[Conduitry]

This feels like a similar issue to #561. If the {{#if}} in the nested component is contained in another element, the issue doesn't present itself. I've been mainly playing around with this not in the REPL, because the REPL seems to be muddying the waters here. I'm going to try to put together a simple unit test that will fail.

[Conduitry]

The mount method for the main fragment in the inner component is this:

		mount: function ( target, anchor ) {
			insertNode( if_block_anchor, target, anchor );
			if ( if_block ) { if_block.mount( target, null ); }
		},

It seems like that .mount should be

			if ( if_block ) { if_block.mount( target, if_block_anchor ); }

[Rich-Harris]

Working as expected in 1.20.1 upwards: https://svelte.technology/repl?gist=68736c878aaf7dfee6ab503df9259f46