Focus input on FormKit component

422 Views Asked by At

I want to focus the first element of a form that uses FormKit. I've tried getting a ref to it, and focus it on mount but it's not working. My failed attempt:

<script setup>
import { ref, onMounted } from 'vue'

const msg = ref('Hello World!')
const target = ref()

onMounted(() => {

  target.value.focus() // error: target.value.node.focus is not a function
})
</script>

<template>
  <FormKit type="text" v-model="msg" ref="target"  />
  <FormKit type="text" value="bla" />
</template>

How could I make the first text input in the code above be focused?

1

There are 1 best solutions below

1
On

this should work:

<FormKit type="text" v-model="msg" autoFocus  />

It should auto-focus when mounted