Focus Nuxt UI UInput

I would like to know how to focus UInput (Nuxt UI v3). I tried this 2 methods but aren't working:

Method 1

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$el.querySelector('input') // return the correct input
input.focus() // doesn't work

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$el.querySelector('input') // return the correct input
input.focus() // doesn't work

Method 2

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$refs.input as any // return undefined
input.focus() // doesn't work (since it's undefined)

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$refs.input as any // return undefined
input.focus() // doesn't work (since it's undefined)

Method 2 was suggested by the creator of NuxtUI, so probably it's just outdated for v3: https://github.com/nuxt/ui/issues/318

GitHub

[Input] Expose a focus method · Issue #318 · nuxt/ui

Is your feature request related to a problem? Please describe. I want to define a shortcut to focus an Input Describe the solution you'd like The Input component should expose a focus method to...

Nuxt•13mo ago•

5 replies

lorenzofiamingo

Focus Nuxt UI UInput

I would like to know how to focus UInput (Nuxt UI v3). I tried this 2 methods but aren't working:

Method 1

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$el.querySelector('input') // return the correct input
input.focus() // doesn't work

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$el.querySelector('input') // return the correct input
input.focus() // doesn't work

Method 2

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$refs.input as any // return undefined
input.focus() // doesn't work (since it's undefined)

const nameInput = useTemplateRef('nameInput')
const input = nameInput.value?.$refs.input as any // return undefined
input.focus() // doesn't work (since it's undefined)

Method 2 was suggested by the creator of NuxtUI, so probably it's just outdated for v3: https://github.com/nuxt/ui/issues/318

GitHub

[Input] Expose a focus method · Issue #318 · nuxt/ui

Is your feature request related to a problem? Please describe. I want to define a shortcut to focus an Input Describe the solution you'd like The Input component should expose a focus method to...

Focus Nuxt UI UInput

Method 1

Method 2

Similar Threads

Focus Nuxt UI UInput

Method 1

Method 2

Similar Threads

Similar Threads

Similar Threads