fix(VAutocomplete): divider/subheader not rendering

[func0der]

Original PR: #15728

Description

This is just an updated version of #15728, since the functionality is still missing and the PR was closed as stale.
@nekosaur I hope this was okay?

You are welcome to update and fix accordingly.

I am not 100% in the Vuetify game and I might have made mistakes merging master. I am especially insecure about the changes in VTreeView, since the component was not present when the original PR was created.

Markup:

As described here: https://vuetifyjs.com/en/getting-started/contributing/#for-docs-language

<template>
  <v-card class="mx-auto" max-width="300">
    <v-list :items="items" />
    <v-select :items="items" />
    <v-autocomplete :items="items" />
    <v-treeview :items="items" />
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          props: {
            subheader: true,
            divider: true,
          },
          title: 'Group #1',
          children: [
            {
              title: 'Item #1',
              value: 1,
            },
            {
              title: 'Item #2',
              value: 2,
            },
            {
              title: 'Item #3',
              value: 3,
            },
          ],
        },
        {
          props: {
            subheader: true,
          },
          title: 'Group #2',
          children: [
            {
              title: 'Item #4',
              value: 4,
            },
            {
              title: 'Item #5',
              value: 5,
            },
            {
              title: 'Item #6',
              value: 6,
            },
          ],
        },
      ],
    }),
  }
</script>

[func0der]

Known issues for now are:

• Failing test because the rending of groups is somehow broken (have not found out why yet)
• The syntax to define subheaders and dividers is unique to this usecase and different from the way of VListItem ,which would result in a breaking change and not a feature
• There might still be unnecessary code in the like the !slots.default lines in VListItem that I can not quite place in the context of this issue

[func0der]

i don't know why this was deleted in the first place. MAybe @nekosaur can say something about that.

[func0der]

@yuwu9145 @johnleider @KaelWD
Any chance we can get a review on this, so I can work on possible change requests and we can continue to work on this? :)

[johnleider]

What is the reasoning from switching from InternalListItem to ListItem?

[johnleider]

What is the reason for this change?

[func0der]

Actually. I have no real clue. This is something I just copied over from the other PR. It came with this commit, which I think is not really related to this change: e6792c1

If it is not needed or is bad practice, I will remove it.

[johnleider]

What is the reason for this change?

[func0der]

Actually. I have no real clue. This is something I just copied over from the other PR. It came with this commit, which I think is not really related to this change: e6792c1

If it is not needed or is bad practice, I will remove it.

[func0der]

@nekosaur Would love for you to chip in on some of those review comments/question, if you can :)

[func0der]

What is the reasoning from switching from InternalListItem to ListItem?

I think that the InternalListItem was more of a helper construct inside the component and not something that was actually used.
Since the whole list flattening is now inside list-items.ts it is not needed anymore. Inside list-items.ts the type is not called FlatListItem.

[gduliscouet-ubitransport]

I tested the branch with the provided markup and the dividers are missing for the VSelect (and VAutocomplete). It seems like this is expecting subheader and divider to be at the root, but it is not the case.

Looking into item.props?.subheader works. It also works like that:

Suggested change

	itemProps: () => (item: any) => ({ subheader: item.subheader, divider: item.divider }),
	itemProps: 'props',

[gduliscouet-ubitransport]

Unless the markup you provided is not the good one @func0der ? I see on the original PR that subheader and divider were at the root of the item

[gduliscouet-ubitransport]

We are quite interested in this feature and I would love to help moving this PR forward. But it is, I think, too much to handle safely by people unfamilliar with the Vuetify codebase. Would a core member be able to help on this ? @johnleider @KaelWD ?

[johnleider]

We are quite interested in this feature and I would love to help moving this PR forward. But it is, I think, too much to handle safely by people unfamilliar with the Vuetify codebase. Would a core member be able to help on this ? @johnleider @KaelWD ?

I've asked @nekosaur if he could take a look at some point when he has time.