{#key} not working as parent of {#if} block

[martinm07]

Describe the bug

{#key} blocks do not trigger updates to the contents of {#if} blocks inside them. The same issue is in Svelte 5.

Reproduction

REPL link

<script>
  import {fade} from "svelte/transition";
  let reinstance = false;

  function reinstantiate() {
    reinstance = !reinstance;
  }
</script>

{#key reinstance}
  {#if true}
    <div in:fade>Hello world!</div>
  {/if}
{/key}
<button on:click={reinstantiate}>
  Redo popin
</button>

I also found this issue and pull request from a couple years ago of pretty much the same issue, and in fact on Svelte version 3.47.0 this isn't an issue (REPL link).

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Memory: 7.47 GB / 15.66 GB
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 125.0.6422.142
    Edge: Chromium (125.0.2535.67)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    rollup: ^4.18.0 => 4.18.0
    svelte: ^4.2.18 => 4.2.18
    webpack: ^5.91.0 => 5.91.0

Severity

annoyance

[henrikvilhelmberglund]

Svelte 4 changed transitions to be local instead of global which causes transitions to not run when nested inside control flow blocks. See #8632

To fix this issue change div in:fade>Hello world!</div> to div in:fade|global>Hello world!</div>
REPL

[martinm07]

Ah, thank you! And perhaps I should go through the tutorial more properly...