Fix(VMenu): wrong item highlighted

[kglazier]

Description

Fix Wrong item highlighted when using prepend-item slot on v-select. Exclude prepend items from the list of options by returning only valid selection options for highlight. Don't highlight option when deselecting.

Motivation and Context

resolves #14489

How Has This Been Tested?

Manually tested using the playground.vue code below. This code is taken from the vuetify select component page https://vuetifyjs.com/en/components/selects/#append-and-prepend-item

Markup:

<template>
  <div>
    <v-row justify="space-around">
      <v-switch
        v-model="dense"
        label="Dense"
      ></v-switch>
      <v-switch
        v-model="selectable"
        label="Selectable"
      ></v-switch>
      <v-switch
        v-model="activatable"
        label="Activatable"
      ></v-switch>
      <v-switch
        v-model="hoverable"
        label="Hoverable"
      ></v-switch>
      <v-switch
        v-model="shaped"
        label="Shaped"
      ></v-switch>
      <v-switch
        v-model="rounded"
        label="Rounded"
      ></v-switch>
      <v-switch
        v-model="openOnClick"
        label="Open on any item click"
      ></v-switch>
      <v-col cols="12">
        <v-select
          v-model="selectedColor"
          :items="selectedColors"
          :disabled="!selectable"
          label="Selected checkbox color"
        ></v-select>
      </v-col>
      <v-col cols="12">
        <v-select
          v-model="color"
          :items="selectedColors"
          :disabled="!activatable"
          label="Active node color"
        ></v-select>
      </v-col>
    </v-row>

    <v-treeview
      :items="items"
      :dense="dense"
      :selectable="selectable"
      :activatable="activatable"
      :hoverable="hoverable"
      :open-on-click="openOnClick"
      :selected-color="selectedColor"
      :color="color"
      :shaped="shaped"
      :rounded="rounded"
    ></v-treeview>
  </div>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          id: 1,
          name: 'Applications :',
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' },
          ],
        },
        {
          id: 5,
          name: 'Documents :',
          children: [
            {
              id: 6,
              name: 'vuetify :',
              children: [
                {
                  id: 7,
                  name: 'src :',
                  children: [
                    { id: 8, name: 'index : ts' },
                    { id: 9, name: 'bootstrap : ts' },
                  ],
                },
              ],
            },
            {
              id: 10,
              name: 'material2 :',
              children: [
                {
                  id: 11,
                  name: 'src :',
                  children: [
                    { id: 12, name: 'v-btn : ts' },
                    { id: 13, name: 'v-card : ts' },
                    { id: 14, name: 'v-window : ts' },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 15,
          name: 'Downloads :',
          children: [
            { id: 16, name: 'October : pdf' },
            { id: 17, name: 'November : pdf' },
            { id: 18, name: 'Tutorial : html' },
          ],
        },
        {
          id: 19,
          name: 'Videos :',
          children: [
            {
              id: 20,
              name: 'Tutorials :',
              children: [
                { id: 21, name: 'Basic layouts : mp4' },
                { id: 22, name: 'Advanced techniques : mp4' },
                { id: 23, name: 'All about app : dir' },
              ],
            },
            { id: 24, name: 'Intro : mov' },
            { id: 25, name: 'Conference introduction : avi' },
          ],
        },
      ],
      dense: false,
      selectable: false,
      activatable: false,
      hoverable: false,
      openOnClick: false,
      shaped: false,
      rounded: false,
      color: 'primary',
      selectedColor: 'accent',
      selectedColors: [
        'accent',
        'teal',
        'red',
        'success',
        'warning lighten-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)
• [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• [x] The PR title is no longer than 64 characters.
• [x] 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).
• [x] My code follows the code style of this project.
• [x] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[kglazier]

Retested with keyboard and with mouse on both treeview and regular menu.

[joel-wenzel]

Was this PR still waiting on changes?

[kglazier]

No more changes have been requested. I requested another review.

[joel-wenzel]

@KaelWD Do you have time to take another look at the changes?