Closed as not planned
Closed as not planned
Description
Describe the bug
When defining a child with a $bindable
prop named value
(which is quite ergonomic on custom inputs):
// child
let {value = $bindable} = $props()
If we create a component that dynamically mounts it, when given as a parameter (new svelte:component
),
<script>
let { chosenInput } = $props();
let inputState = $state('default text');
</script>
<chosenInput bind:value={inputState} />
We will get the error:
`bind:value` can only be used with <input>, <textarea>, <select>svelte(bind_invalid_target)
This shouldn't be the case, since we very clearly can bind:value
if such bindable property exists (REPL)
Reproduction
Workaround:
For some reason, it does work if the Component
we're initializing is an object
's member, so we can wrap it with {@const}
: Workaround REPL
{#if chosenInput}
{@const workaround = {
component: chosenInput
}}
<workaround.component bind:value={inputState} />
{/if}
Note that, since this is not a language-tools
error/warning, we cannot fix it with a type definition that includes value
as a bindable. The runtime error does not go away:
let chosenInput: Component<Record<string,any>, {}, "value">
Logs
No response
System Info
svelte@5.0.5
Severity
annoyance, have found a workaround
Metadata
Metadata
Assignees
Labels
No labels