vuetify fix(VAutocomplete): divider/subheader not rendering

fix(VAutocomplete): divider/subheader not rendering

Open nekosaur opened this issue 1 year ago • 7 comments

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

[x] 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)
[x] 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)

Sep 01 '22 22:09 nekosaur

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',
      },
    ],
  },
]

Sep 05 '22 15:09 KaelWD

~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

Sep 16 '22 22:09 nekosaur

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.