[Input] Expose a focus method

[ChristopheCVB]

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 be used through a ref

Describe alternatives you've considered

Using a ref inputWrapper

inputWrapper.value.$el.getElementsByTagName('input')[0].focus()

[benjamincanac]

You can achieve this by setting a ref to your UInput and then accessing the ref of the input inside:

<script setup>
const inputRef = ref()

defineShortcuts({
  meta_f: () => {
    inputRef.value.$refs.input.focus()
  }
})
</script>

<template>
  <UInput ref="inputRef" />
</template>

[ChristopheCVB]

Thanks @benjamincanac

[lorenzofiamingo]

@benjamincanac This is not working anymore for me in v3

[HugoRCD]

@lorenzofiamingo Check out this section of the doc for v3!

https://ui3.nuxt.dev/components/input#with-keyboard-shortcut

[lorenzofiamingo]

@HugoRCD Thank you very much! I missed this section.

Would be nice to have the same for PinInput, for now this is working for me: pinInput.value?.$el.querySelector('input').focus()