[Combobox][Vue] ComboboxInput as template produces extra focusable element

[dcrall]

Hello. I'm using Combobox to build a typeahead search. I have my own custom search input component that is basically a div wrapping an input but handles our brand styles, accepts icons, and has an embedded clear button. My template looks something like this:

<Combobox>
  <ComboboxInput as="template" ...>
    <CustomSearchInput ... />
  </ComboboxInput>
 <ComboboxOptions>...</ComboboxOptions>
<Combobox>

For the most part this is great. However, <ComboboxInput> is adding tabindex="0" to the root div of my search component, which creates an extra focusable element. So when I tab into the component the div focuses before my input does.

Is there anyway to get around this? It seems reasonable that if I am taking over the input template that I should be responsible for setting the tabindex

Big thanks to the HeadlessUI team for the great project.

[netchampfaris]

@dcrall Hey, I am in a similar situation. But even my custom search input doesn't work.

This is the official example from the docs but with a custom input component TextInput.

<template>
  <Combobox v-model="selectedPerson">
    <ComboboxInput @change="query = $event.target.value" as="template">
      <TextInput />
    </ComboboxInput>
    <ComboboxOptions>
      <ComboboxOption
        v-for="person in filteredPeople"
        :key="person.id"
        :value="person"
      >
        {{ person }}
      </ComboboxOption>
    </ComboboxOptions>
  </Combobox>
</template>

<script setup>
import { TextInput } from 'frappe-ui'
import { ref, computed } from 'vue'
import {
  Combobox,
  ComboboxInput,
  ComboboxOptions,
  ComboboxOption,
} from '@headlessui/vue'

const people = [
  'Durward Reynolds',
  'Kenton Towne',
  'Therese Wunsch',
  'Benedict Kessler',
  'Katelyn Rohan',
]
const selectedPerson = ref(people[0])
const query = ref('')

const filteredPeople = computed(() =>
  query.value === ''
    ? people
    : people.filter((person) => {
        return person.toLowerCase().includes(query.value.toLowerCase())
      })
)
</script>

I get this error when I type in the input:

What am I doing wrong?