Element reference null in combination with #key block and transition directive

[lukaromih]

Describe the bug

In my project I have a menu on/off button. In the menu, you pick a value and the button's visualization updates based on that value. For better UX I've added transitions with the help of #key block. I also need to keep a reference to the button, but eventually it ends up as null.

1. In the provided reproduction open up your browser developer tools to see console logs of when and to what the reference will change. Initially it (menuToggleButtonRef) will be bound to the button as it should (evident from the console log and the displayed paragraph).
2. Click the Toggle menu button
3. Click the Increase value button
4. Click the Toggle menu button and notice how the reference (value of menuToggleButtonRef) was changed to null

The weirdest part is, if anything, I'd expect the reference to be lost on step 3, when the Toggle button needs to be rerendered due to currentValue change and a #key block referencing it wrapping the button whose reference we're discussing, since due to the transition directive on button, there will be 2 or more buttons (depending how fast you're clicking the Increase value button) in existence while the transitions/animations are running. No, the reference to the button (menuToggleButtonRef) is set to null when you click on itself (after having changed currentValue) (step 4), which does nothing else but toggle the value of isMenuOpen which shouldn't have to do anything with itself. To add to the whole confusion, the menuToggleButtonRef appears to regain the reference to the button if you increase the value again.

In short, I'd expect menuToggleButtonRef to never lose reference to the button, but the way it's breaking here, it's doing so exactly the opposite of how I'd imagine.

Reproduction

https://svelte.dev/repl/4dfcd839402c43bc89f3f92a9c8dc6b0?version=4.2.16

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 10.72 GB / 15.52 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm

Severity

annoyance