Using a ref inside a {#key} block turns it undefined or null

[kevinXmichael]

Describe the bug

When I use a {#key} block that has a reactive variable from a store (let's call it someVar), my binding for a component will get lost. On initial render this variable is bound and I can interact with my component. But when someVar changes, I cannot longer use the component, the binding turns undefined or null.

Is this intended? Or is there a workaround? When I just put the component outside that block it will work, but will cause me some "flickering" in the UI that I want to prevent.

Reproduction

This this REPL.

Logs

This is a dialog component with a click handler that calls a show function.

Uncaught TypeError: Cannot read properties of null (reading 'show') at HTMLDivElement.click_handler

System Info

- macOS v12.4
- Chrome v102
- vscode

Severity

annoyance

[dummdidumm]

Please provide a complete reproduction using the REPL

[kevinXmichael]

@dummdidumm I tried to reproduce it on the REPL that I added, but there it is working. The scenario is a bit complex, as I fetch some async data and the click handler that causes the error lies in an if-block.

Also the component that I show (comp1) has another conditional component inside (comp2).

[Avi-ADAM]

Describe the bug

When I use a {#key} block that has a reactive variable from a store (let's call it someVar), my binding for a component will get lost. On initial render this variable is bound and I can interact with my component. But when someVar changes, I cannot longer use the component, the binding turns undefined or null.

Is this intended? Or is there a workaround? When I just put the component outside that block it will work, but will cause me some "flickering" in the UI that I want to prevent.

Reproduction

This this REPL.

Logs

This is a dialog component with a click handler that calls a show function.

Uncaught TypeError: Cannot read properties of null (reading 'show') at HTMLDivElement.click_handler

System Info

- macOS v12.4
- Chrome v102
- vscode

Severity

annoyance

happening to me as well when using it with array and SveltyPicker component whenever anything on the array changed all the dates in the array turn null. i also having a problem because im renderin this array into a table using each and if blocks , but some changes are not making it rerender correctly and cousin errors (undefined on sometime that use to be excluded by if and now need to be rendered) the only thing that make it reactiv is the key blocks..

[tanhauhau]

@kevinXmichael the REPL you shared is working, even if i tried to call update(). is there a way i can replicate your issue?

@Avi-ADAM could you please share a reproduction using the https://svelte.dev/repl, this would help a lot on figuring out what's going wrong