State in onblur handler is undefined after navigation #16875
Description
Describe the bug
Relevant issues:
- Common auto-save pattern does not work for inputs #14911
- In onblur handler: state_unsafe_mutation Updating state inside a derived or logic block expression is forbidden [svelte 5 issue] #13684
Relevant fixes:
- fix: ensure event context is reset before invoking callback #13737
- fix: avoid chromium issue with dispatching blur on element removal #13694
I'm not really sure what the correct "mental model" is of this behaviour - but my two cents is that it feels wrong. It's really difficult to spot, as there's no typing that tells me that this can happen. The type-definition of let { data } = $props() is:
let data: {
state: {
message: string;
};
}How can one know that state can be undefined from this.
Reproduction
Github repro: https://github.com/MathiasWP/sveltekit-input-onblur-async-state-bug
Video:
https://github.com/user-attachments/assets/278db046-f4ec-4463-8b1c-c0158dbb23f3
Logs
+page.svelte?t=1759308998689:23 Uncaught TypeError: Cannot set properties of undefined (setting 'message')
at HTMLInputElement.<anonymous> (+page.svelte?t=1759308998689:23:93)
at events.js:61:21
at without_reactive_context (shared.js:44:10)
at HTMLInputElement.target_handler (events.js:60:11)
at remove_effect_dom (effects.js:524:8)
at destroy_effect (effects.js:471:3)
at destroy_effect_children (effects.js:435:4)
at destroy_effect (effects.js:475:2)
at destroy_effect_children (effects.js:435:4)
at destroy_effect (effects.js:475:2)System Info
System:
OS: macOS 15.6.1
CPU: (8) arm64 Apple M1 Pro
Memory: 274.14 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
pnpm: 10.6.5 - /opt/homebrew/bin/pnpm
bun: 1.0.0 - ~/.bun/bin/bun
Browsers:
Brave Browser: 139.1.81.137
Chrome: 140.0.7339.208
Edge: 140.0.3485.94
Safari: 18.6
npmPackages:
svelte: ^5.0.0 => 5.39.7Severity
annoyance