How to handle focus?

[martinjo]

Change Type

Addition

Proposed Changes

Perhaps this question is so basic that it's obvious how to solve it, but I still got stuck.

How can I focus an element from code?
I converted my code from using a normal to the shadcn and I now need a way to focus my input field in the same way as I did before (inputField.focus() // InputField being bound to the actual ).

Can the concepts for this be found in the documentation? How can it be done? :)

[manuganji]

Do you mean focus on pageload? You can use https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

But it's not very accessible.

[manuganji]

You can also bind a variable (e.g. el) to the element and then do el.focus()

[martinjo]

I see now how vague my questions is! I understand how I can focus a normal input element, and it would be trivial to modify the shadcn-Input source to allow focusing the input. But is there a way to do this without modifying the code.

I was kind of expecting a focus() method to be available on the shadcn- component, but perhaps there is another way?

[munxar]

I solved this with an id:

<script>
    import Button from '$lib/components/ui/Button';
    import Input from '$lib/components/ui/Input';

    const onFocus = () => {
        const el = document.getElementById("myInput")
        el.focus()
    }
</script>
<Button onclick={onFocus}>Focus</Button>
<Input id="myInput" />

No code change needed.