Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svelte:element Boolean Attributes don't get handled like propper elements (disabled="false") #7478

Closed
SarcevicAntonio opened this issue Apr 21, 2022 · 1 comment · Fixed by #7486

Comments

@SarcevicAntonio
Copy link
Member

SarcevicAntonio commented Apr 21, 2022

Describe the bug

Using svelte:element results in boolean attributes being incorreclty set, or at least not like they would be set with propper elements.

Example (REPL with comparison to propper element)

<!-- SvelteElementButton -->
<script>
	export let disabled = false;
</script>

<svelte:element
	{disabled}
	this={'button'}
>
	<slot/>
</svelte:element>

<!-- App -->
<SvelteElementButton>
	bla
</SvelteElementButton>

<!-- Renders -->
<button disabled="false">bla</button>

<!-- Expected -->
<button disabled>bla</button>

In this case it disables the buttons because disabled="false" will still make the browser disable the button.

I also tried using require with input elements and it's the same there: https://svelte.dev/repl/55ddd8362fa04dad908f0877a60f3377?version=3.47.0

I then also tried using hidden with the button again and there it seems to work as expected:
https://svelte.dev/repl/c8dd16ea3ebe4ff5aa8ddaca3db6ad34?version=3.47.0

A random thing I've found is using {...$$restProps} fixes it: https://svelte.dev/repl/7258278f483442bd9bcd64a6bec0d5ae?version=3.47.0

Reproduction

https://svelte.dev/repl/8c4f406ef863453cb7616cd5c0b796d7?version=3.47.0

Logs

No response

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.20 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 98.0.1
    Safari: 15.4
  npmPackages:
    svelte: ^3.47.0 => 3.47.0

Severity

annoyance


Workaround

use disabled={disabled || null} instead

@Conduitry
Copy link
Member

This should be fixed in 3.48.0 - https://svelte.dev/repl/8c4f406ef863453cb7616cd5c0b796d7?version=3.48.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants