<UInput> template ref does not work

[maciekkand]

Environment

• Operating System: Windows 10
• Node Version: v22.10.0
• Nuxt Version: 3.16.0
• CLI Version: 3.22.5
• Nitro Version: 2.11.5
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, modules, css, meta, ssr, runtimeConfig, ui
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected]

Is this bug related to Nuxt or Vue?

Nuxt

Version

Nuxt UI 3.0

Reproduction

<template>
<UInput
      v-model="translation"
      ref="translationField"      
  />
</template>

<script setup>
const translationField = ref(null)

function nextCard() {
   translationField.value.focus()  // throws: 'focus is not a function'
 
  nextTick(() => {
     translationField.value.focus()  // same error
  })

  // below works ok
  nextTick(() => {
      const input = translationField.value?.$el?.querySelector('input')
      if (input) {
        input.focus()
      }
    })
}
</script>

Description

Standard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'
In the above code snippet I included workaround (credits to Sonnet 3.5)
Tried it dozen of times and checked this place to see if it has not been solved earlier.

Additional context

No response

Logs

[HugoRCD]

@maciekkand Have you tried usingTemplateRef in this way?
https://ui.nuxt.com/components/input#with-keyboard-shortcut

[maciekkand]

Hi Hugo, Big thank you for such an instant response. I have not seen it, but I will try it out in a second, as it seems to be exactly my case. Should I mark that Bug Report as solved or you guys will do that ? Sorry for not reading docs thoroughly enough hence polluting Bug Report page Greetings Maciek pt., 21 mar 2025 o 13:38 Hugo Richard ***@***.***> napisał(a):

…

@maciekkand <https://github.com/maciekkand> Have you tried usingTemplateRef in this way? https://ui.nuxt.com/components/input#with-keyboard-shortcut — Reply to this email directly, view it on GitHub <#3644 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIE42DC64UKFZMAVBNMIZYT2VQB3RAVCNFSM6AAAAABZP4MCNOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBTGI2DOMRXGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: HugoRCD]*HugoRCD* left a comment (nuxt/ui#3644) <#3644 (comment)> @maciekkand <https://github.com/maciekkand> Have you tried usingTemplateRef in this way? https://ui.nuxt.com/components/input#with-keyboard-shortcut — Reply to this email directly, view it on GitHub <#3644 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIE42DC64UKFZMAVBNMIZYT2VQB3RAVCNFSM6AAAAABZP4MCNOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBTGI2DOMRXGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[HugoRCD]

Don't worry, we are here to help ! 😁