Open HCaupert opened 1 month ago
I faced an issue on our InputWrapper component, we end up destructuring $$props (or anything else, even {}) into the <input/> it self. It seems that no matter what we send here, the autoFocus property is not serialized correctly :
{}
<input/>
autoFocus
// InputWrapper.svelte <input {...{}} {autofocus} /> // Usage <InputWrapper autofocus={false}/>
Gives the following output
<input autofocus="false">
Which is a truthy value ending up having the input focused. One workaround is to set this value to undefined manually like this.
undefined
autofocus = autofocus ? true : undefined
I'm pretty sure this issue is not specific to input or autofocus but rather the way svelte props destructuration works
https://svelte.dev/repl/a62fe9436dd9442ea067420b5064f403?version=4.2.18
Autofocus processing was blocked because a document already has a focused element.
I dont think this it's system dependant System: OS: macOS 14.5 CPU: (10) arm64 Apple M1 Max Memory: 99.59 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.4.1 - ~/.nvm/versions/node/v22.4.1/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v22.4.1/bin/yarn npm: 5.1.0 - ~/Projects/node_modules/.bin/npm pnpm: 9.5.0 - ~/Library/pnpm/pnpm Browsers: Chrome: 126.0.6478.185 Safari: 17.5 npmPackages: svelte: ^4.2.18 => 4.2.18
annoyance
This is fixed in Svelte 5, not sure if it's worth it to backport
Describe the bug
I faced an issue on our InputWrapper component, we end up destructuring $$props (or anything else, even
{}
) into the<input/>
it self. It seems that no matter what we send here, theautoFocus
property is not serialized correctly :Gives the following output
Which is a truthy value ending up having the input focused. One workaround is to set this value to
undefined
manually like this.I'm pretty sure this issue is not specific to input or autofocus but rather the way svelte props destructuration works
Reproduction
https://svelte.dev/repl/a62fe9436dd9442ea067420b5064f403?version=4.2.18
Logs
System Info
Severity
annoyance