Destructuring on input fills all values.
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, the autoFocus property is not serialized correctly :
// 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.
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
Reproduction
https://svelte.dev/repl/a62fe9436dd9442ea067420b5064f403?version=4.2.18
Logs
Autofocus processing was blocked because a document already has a focused element.
System Info
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
Severity
annoyance
This is fixed in Svelte 5, not sure if it's worth it to backport
Closing. There are a bunch of other issues we've been closing because they're fixed in v5 - and this particular doesn't seem worth backporting, especially as it has a workaround.