Custom ComboboxOption template

[antoniogiroz]

Hi!

I'm using the Combobox component in Vue 3 as follow

....
<ComboboxOptions>
  <ComboboxOption as="template" v-for="option in options" :key="option.id" :value="props.option">
     <li>
          {{ option.name }}
      </li>
  </ComboboxOption>
</ComboboxOptions>
....

But if I extract the li inside a component like this:

<ComboboxOptions>
  <ComboboxOption v-slot="{ selected, active }" as="template" v-for="option in options" :key="option.id" :value="props.option">
     <CustomSelectorListItem :value="props.name" :selected="selected" :active="active" />
  </ComboboxOption>
</ComboboxOptions>

I get this error:

The current component <ComboboxOption /> is rendering a "template".
However we need to passthrough the following props:
  - aria-disabled
  - aria-selected
  - disabled
  - id
  - onClick
  - onFocus
  - onMouseleave
  - onMousemove
  - onPointerleave
  - onPointermove
  - ref
  - role
  - tabIndex
  - value

You can apply a few solutions:
  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".
  - Render a single element as the child so that we can forward the props onto that element.

What is wrong?

Thanks!