How to get a reference to the underlying DOM element

[denisborovikov]

Can this be done with the form components?

I want to get a reference to the DOM input element to focus it, but it seems the Input component doesn't forward refs to the underlying DOM input (sorry for the React terminology, I'm new to Svelte)

Works

<input bind:this={ref} />

ref.focus()

Doesn't work

<Input bind:this={ref} />

[ramilamparo]

Seems that there are no props provided for binding elements.

One workaround is:

<script>
let container
$: input = container.querySelector("input")
</script>

<div class="content" bind:this={container}>
    <Input />
</div>

The input variable will contain the underlying input element. The content class is used so it wouldn't affect the layout.

[danielo515]

That is quite an omission, to be honest.
Thankfully your workaround works really well. Thanks

[vincenzoml]

Is this the only accepted answer? I can't find any way to focus a search box.