sveltejs / svelte

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

Destructuring on input fills all values. #12653

Open HCaupert opened 1 month ago

HCaupert commented 1 month ago

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

dummdidumm commented 1 month ago

This is fixed in Svelte 5, not sure if it's worth it to backport