svelte
svelte copied to clipboard
[Svelte 4] bind:this is undefined when running action of child until all children initialize
Describe the bug
this should be similar to #12673 but that one is about svelte 5, this is svelte 4, so I can't easily just upgrade to the prerelease version of svelte 5 the fix got applied to.
#12673 also was about the action and bind:this being on the same element, but here it's a child element having the action, while the parent element is being bound.
I do acknowledge that it might be intentional with the intention to not bind it until it's fully initialized to uphold invariants, among other things, but nothing of that sort is mentioned in the docs so I figured I'd mention it here but marking it as annoyance instead of "blocking usage of svelte". also in most cases one can just directly get the parent from the element ref you get as the param of the action which further lowers the priority of this issue
EDIT: I just realized that in event handlers like <svelte:window on:resize={()=>{}}/>
there's no option to "just get the parent"
Reproduction
https://svelte.dev/repl/9ed2feb6cdc64ca2a795ee98f89c4a7d?version=4.2.18
the children already exist, and thus the parent also exist, but thing
does not get bound until its children are done intializing.
Logs
No response
System Info
System:
OS: macOS 14.0
CPU: (8) arm64 Apple M2
Memory: 68.31 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.5.1 - /opt/homebrew/bin/node
npm: 10.8.2 - /opt/homebrew/bin/npm
pnpm: 9.6.0 - /opt/homebrew/bin/pnpm
bun: 1.1.21 - /opt/homebrew/bin/bun
Browsers:
Chrome: 127.0.6533.99
Safari: 17.0
npmPackages:
svelte: ^4.2.18 => 4.2.18
Severity
annoyance