sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
77.94k stars 4.07k forks source link

Svelte5: Transitions break when state changes while it is still running. DOM does not reflect state properly. #11528

Closed Alia5 closed 1 month ago

Alia5 commented 3 months ago

Describe the bug

If you have a transition on an element and the condition changes while the transition is still running,
then only the first state change triggers the transition, subsequent state changes are not triggering new transitions,
nor cancel the already running one.

This is especially bad if one is using forms with use:enhance in SvelteKit, as form-ActionData gets set to undefined on submit and applied afterward. If the request was now faster than the transition, well... Your conditional elements may not get displayed anymore.

Reproduction

Svelte5 REPL (broken)

Svelte5 / SvelteKit form Example (Broken)

Svelte4 Repl (working as intended)

Instructions:

Logs

No response

System Info

System:
    OS: Linux 5.15 Arch Linux (WSL)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 5.91 GB / 15.57 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.1.0 - ~/.nvm/versions/node/v22.1.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v22.1.0/bin/npm
    bun: 1.0.2 - ~/.bun/bin/bun
  Browsers:
    Chromium: 124.0.6367.155
  npmPackages:
    svelte: 5.0.0-next.123 => 5.0.0-next.123

Severity

blocking an upgrade

Alia5 commented 1 month ago

Fixed By: https://github.com/sveltejs/svelte/pull/12389