Autofocus combobox input

[GreenImp]

Is there any way to autofocus the input field of a combobox, in VueJS?
I've got situation where I am programmatically showing the combobox and what it to then have focus.

I have tried setting autofocus on the ComboboxInput component like:

<Combobox ...>
  <ComboboxInput ... autofocus />
  ...
</Combobox>

But this has no affect.

I've also tried programmatically triggering focus using a reference on both the ComboboxInput and the Combobox itself. e.g.:

// with a `ref="input"` attribute added to the `ComboboxInout` component
const input = ref(null);

onMounted(() => {
    input.value.focus();
});

But that throws an error:

TypeError: input.value.focus is not a function

Is it actually possible to autofocus the input?

[steveoh]

I'm looking to do the same thing with list box. There is no ref api. Are we supposed to use forwardRef?

[nurdism]

For vue this works:

<script setup>
  const input = ref()

  onMounted(() => {
    if (input.value) {
      input.value.el.focus()
    }
  })
</script>

<template>
   <ComboboxInput ref="input"  />
</template>

[nurdism]

found here

[brandonaaskov]

The .el part of that is the critical piece other articles/answers miss. Thank you so much!