fix(VAutocomplete): divider/subheader not rendering

[nekosaur]

Description

closes #15721

Motivation and Context

How Has This Been Tested?

Markup:

<template>
  <div>
    <v-select
      :items="people"
      filled
      chips
      closable-chips
      color="blue-grey-lighten-2"
      label="Select"
      multiple
    ></v-select>

    <v-autocomplete
      :items="people"
      filled
      chips
      closable-chips
      color="blue-grey-lighten-2"
      label="autocomplete"
      multiple
    ></v-autocomplete>

    <!-- <v-list :items="people" /> -->
  </div>
</template>

<script>
  const srcs = {
    1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
    2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
    3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
    4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
    5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
  }

  export default {
    data: () => ({
      people: [
        {
          title: 'Group 1',
          subheader: true,
          divider: true,
          children: [
            { title: 'Jane Smith', group: 'Group 1', avatar: srcs[5] },
            { title: 'Britta Holt', group: 'Group 1', avatar: srcs[4] },
          ],
        },
        {
          title: 'Group 2',
          subheader: true,
          children: [
            { title: 'Trevor Hansen', group: 'Group 2', avatar: srcs[3] },
            { title: 'Ali Connors', group: 'Group 2', avatar: srcs[2] },
          ],
        },
      ],
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[KaelWD]

How about groups instead so they can be kept while filtering?

type ListItem = ({
  title?: string
  subtitle?: string
  avatar?: string
} | {
  header: string
}) & {
  divided?: boolean
  children?: ListItem[]
}

const items = [
  {
    header: 'Group 1',
    divided: true,
    children: [
      {
        title: 'Trevor Hansen',
        subtitle: 'Group 1',
      },
    ],
  },
]

[nekosaur]

• type is a very bad prop name, needs to be renamed
• I kept item type divider because I didn't want to add another itemX prop and special parsing for it

[paul-thebaud]

How about groups instead so they can be kept while filtering?

Hi, I agree with @KaelWD about real groups inside v-select/autocomplete, because the current implementation is not accessibility friendly. See the group ARIA role doc.

[volarname]

+1 for merge

[johnleider]

The failed tests in this case are legitimate.

[func0der]

This is closed without a fix getting to master or am I just blind?