[Bug Report][3.0.0] v-autocomplete items header / divider not working

[ppyl-datBoi]

trafficstars

Environment

Vuetify Version: 3.0.0-beta.9 Vue Version: 3.2.38 Browsers: Chrome 104.0.0.0 OS: Windows 10

Steps to reproduce

This feature does not work in your example.

Expected Behavior

v-autocomplete reads the options in the object.

Actual Behavior

Just empty space

Reproduction Link

https://codepen.io/ppyl-datboi/pen/dyebexE?editors=101

[ajslater]

A workaround for this is very easy with item slots. It was a nice little feature of v2 but not critical. e.g.

    <template #item="{ item, props }">
      <!-- Divider in items not implemented yet in Vuetify 3 -->
      <v-divider v-if="item.value === 'f'" />
      <v-list-item v-bind="props" :title="item.title" :value="item.value" />
    </template>

[grolu]

If you consider this to be an enhancement and not a bug, it would be nice if you could remove this feature from the documentation...

[ElYaiko]

Any update? in VSelect items with { header: '' } / { divider: true } is not working neither but is in the documentation

A temporal fix:

                  <template #item="{ item, props }">
                    <VDivider v-if="'divider' in item.raw" />
                    <VListSubheader v-else-if="'header' in item.raw" :title="item.raw.header"/>
                    <VListItem v-else v-bind="props" :title="item.title" :value="item.value"/>
                  </template>

[NightFurySL2001]

From the documentation:

Can be an array of objects or array of strings. When using objects, will look for a title, value and disabled keys. This can be changed using the item-title, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.

Please remove this from the documentation if this is not working anymore.

Also related: https://github.com/vuetifyjs/vuetify/issues/4148#issuecomment-1233970983

header and divider have been moved to type: 'subheader' | 'divider' in v3, and only title and value are read from objects by default unless you enable item-props

Temporal fix for multiple select with checkbox based on previous comments and source code for the item slot (also checking if the list item is an object or not):

<template #item="{item, props}">
  <VDivider v-if="typeof item.raw === 'object' && 'divider' in item.raw" />
  <VListSubheader
    v-else-if="typeof item.raw === 'object' && 'header' in item.raw"
    :title="item.raw.header"
  />
  <VListItem
    v-else
    v-bind="props"
    :label="item.title"
    :value="item.value"
  >
    <template #prepend="status">
      <VCheckboxBtn
        :key="item.value"
        :modelValue="status.isSelected"
        :ripple="false"
        tabindex="-1"
      />
    </template>
  </VListItem>
</template>

Would be better though if the code is working as the docs, so we as developers don't need to recode the whole core functionality again.

[func0der]

opened a rebased variant of the original PR from @nekosaur Maybe you guys can chime in on that one :)

https://github.com/vuetifyjs/vuetify/pull/19912