Bug involving transition, value binding and "bind:this"

[elpres]

Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it.

No, it's about version 3.38.2

Describe the bug

The reference to a child component is set to null after it is transitioned out, replaced by another one, and you interact with that new child. Here is a REPL to try it out. The text at the very bottom indicates whether childNode (which is bound to a component via bind:this) is null or not. The steps to reproduce are:

1. Click the button
2. Click into the input that appears
3. Type something
4. The text changes to "null"

I can reliably reproduce it in Firefox 89 and Safari 14.1.1, both on macOS 10.14.6

Expected behavior

The node reference should always point to one of the components, and never be null

Severity

Moderately severe, since there is a workaround, which is not to use transitions anywhere. I'm building an interface that has a static left column and different components for the main area. Having them fade into each other (as well as some animations inside them) is at the very least nicer than abrupt changes, so I would like to keep the transitions in place.

One of the components stores user input that I would like to notify the user about if they didn't save their changes. I do that by calling a function exposed via export const function before the component switch happens. At that time, the child reference (its bind:this value) should always point to the component. Instead, because of this bug, it turns to null sometimes and then the UI breaks because I'm trying to call a method on null:

Uncaught TypeError: childNode is null

[antony]

It's a bit difficult to see your exact use-case here, I might suggest that you could pair down the REPL into an even simpler format.

What I did was I modified your switch method so that it switched between the two components rather than always switching to input, and the binding is then never undefined, and is in fact always bound to the correct component (the visible one).

If this works for you, I would suggest that you are able to do whatever you need to here, and this isn't an issue.

If you think there is still an issue, I think a simpler REPL would help us understand and fix it.

[elpres]

Thanks for taking a look into this. The REPL indeed doesn't represent the actual use case all that well, which looks like this: The app has an always visible sidebar, and a main area that different components are slotted into. One of them contains a form, and whenever you switch away from it, I need to call a method to see if its content was changed. So I keep a reference to the current component using bind:this. But it turned out that if you transition (e.g. fade in/out) the components when switching them AND interact with the form, then the reference to the component is set to null.

I don't know how to simplify the REPL even further while keeping all three conditions that seem to be necessary to reproduce in there (1: 'bind:this`, 2: transition, 3: interaction with an input field inside the component).

What I did was I modified your switch method so that it switched between the two components rather than always switching to input, and the binding is then never undefined, and is in fact always bound to the correct component (the visible one).

I'd be grateful to see the modification you made. With it, does the reference stay not null if you type something into the input?

Also, I just noticed that if you click the button twice, childNode is also set to null, which seems to be another issue that shouldn't be happening, since the childNode is not explicitly unset inside the the switch_ function. Should I open a separate issue for this?

[tqtifnypmb]

Met same issue here~

[dummdidumm]

Fixed in Svelte 5