svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Destructuring on input fills all values.

Open HCaupert opened this issue 1 year ago • 1 comments

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

HCaupert avatar Jul 29 '24 16:07 HCaupert

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

dummdidumm avatar Jul 29 '24 16:07 dummdidumm

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.

Conduitry avatar Nov 03 '24 21:11 Conduitry