feat(VSelect): emit selected listIndex event

[mateuszgachowski]

Hi guys,

This is my first contribution to Vuetify. Thank you all for your hard work doing this amazing software!

Description

Adds update:menuListIndex event for v-select/v-autocomplete components to inform on any menu index change (using keyboard). This is helpful for example to indicate if an item is selected or not (index -1).

Motivation and Context

v-autocomplete and v-select does not provide a clear way to indicate if any item in the menu was selected. This event is triggered when keyboard arrows are used to change the selection.
It could help reacting on empty "enter" keypress.

For my case I was doing a search input with suggestions with pretty default logic:

1. When you input some search query, suggestions appear. If you hit enter right away you will be redirected to full-search page.
2. If you use your arrows to navigate through the elements and hit enter, the default behavior (input) is triggered.

There wasn't any prop or event that could indicate that the selected index is not -1. I wasn't able to decide which strategy should be triggered when "enter" was hit. With this change I can for example store the index and check it on @keyup.enter event.

How Has This Been Tested?

I've used playground to test both the v-autocomplete and v-select for event emission.
I have created one unit test that checks if event is fired when navigating on the suggestion items.

Markup:

<template>
  <v-container>
    <v-autocomplete
      ref="autocomplete"
      append-icon=""
      append-outer-icon="search"
      label="Search"
      :items="results"
      :no-filter="true"
      :return-object="true"
      @input="selected"
      @update:list-index="setListIndex"
      @keyup.enter="searchPage"
    >
    </v-autocomplete>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      listIndex: -1,
      results: [
        {
          name: 'Search result item 1',
          text: 'result-item-1'
        },
        {
          name: 'Search result item 2',
          text: 'result-item-2',
        }
      ],
    }),
    methods: {
      selected(el) {
        console.log('Redirect directly to selected element', el.name)
      },
      searchPage() {
        if (this.listIndex === -1) {
          console.log('GO TO FULL SEARCH PAGE')
        }
        return;
      },
      setListIndex(index) {
        this.listIndex = index;
      }
    }
  }
</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 feature but make 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 breaking 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)

[codecov]

Codecov Report

Merging #7828 into dev will decrease coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##             dev    #7828      +/-   ##
=========================================
- Coverage   85.8%   85.79%   -0.01%     
=========================================
  Files        334      334              
  Lines       9095     9096       +1     
  Branches    2418     2418              
=========================================
  Hits        7804     7804              
- Misses      1203     1204       +1     
  Partials      88       88

Impacted Files	Coverage Δ
packages/vuetify/src/components/VSelect/VSelect.ts	93.79% <100%> (-0.35%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1bfb4ad...e79211d. Read the comment docs.

[MajesticPotatoe]

• rebase to next
• menuListIndex sounds a bit wordy probably change to just listIndex instead

[mateuszgachowski]

Thanks for your comments ;) Added on next branch.

[mateuszgachowski]

@MajesticPotatoe any chance to merge this?

[MajesticPotatoe]

• doc updates need to be added for combobox as well (as this change effects this)
• test should probably be moved to v-select as its where the change roots from.
• should probably standardize event name in docs to kebab case like how prepend-inner/prepend-outer/etc are
  notes:
• your playground is out of date. should be @update:listIndex not update:menu-list-index
• PR is still under review as to whether it will make it into 2.0 or not (As we are already really close to release). any other thoughts @vuetifyjs/core-team ?

[mateuszgachowski]

@MajesticPotatoe I have applied your suggestions, thanks :)

Complete

[mateuszgachowski]

@MajesticPotatoe any chance to have it in current 1.X version too? I'm not sure when we will migrate our project to 2.0. I can also use the forked version if its not possible.

[MajesticPotatoe]

Unfortunately 1.5 is no long receiving features as it is entering LTS and will only receive critical updates and bug fixes.

[myleslee]

@mateuszgachowski I was looking for a decent solution for catching the enter event and your brilliant PR was just it! Thank you!

[mateuszgachowski]

Guys, anytime soon this will get pulled?

[myleslee]

@MajesticPotatoe @johnleider what could be your major concerns that keep you from merging this PR?

[MajesticPotatoe]

@myleslee

[mateuszgachowski]

Guys, are we pulling this to main repo? :) Its been a while...

[myleslee]

It would definitely be frustrating to see the issue being labelled with S: has merge conflicts once again.