docs: add example for avoiding duplicate text using item slot (#21989)

Co-authored-by: Andrew Henry <[email protected]>
Resolves #19396

Author: antonhansson0624

packages/docs/src/examples/v-menu/prop-positioningmenu.vue

@@ -52,10 +52,10 @@
     { title: 'Remove', prependIcon: 'mdi-trash-can-outline', code: 'delete' },
   ]
 
-  async function show(evt) {
+  async function show (evt) {
     if (showMenu.value) {
       showMenu.value = false
-      await new Promise(r => setTimeout(r, 100))
+      await new Promise(resolve => setTimeout(resolve, 100))
     }
     menuTarget.value = evt.target.closest('.v-icon-btn')
     showMenu.value = true

packages/docs/src/examples/v-select/prop-avoid-duplicate-text.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-select v-model="model" :items="items">
+        <template v-slot:item="{ props, item }">
+          <v-list-item v-bind="props" :title="null">
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item>
+        </template>
+      </v-select>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
+      model: 'Foo',
+    }),
+  }
+</script>

packages/docs/src/pages/en/components/selects.md

@@ -89,6 +89,11 @@ You can specify the specific properties within your items array that correspond
 
 <ExamplesExample file="v-select/prop-custom-title-and-value" />
 
+When customizing items with the `item` slot, you should disable the default `title` prop rendering to avoid duplicate text.
+You can do this by setting `:title="null"` on `v-list-item`.
+
+<ExamplesExample file="v-select/prop-avoid-duplicate-text" />
+
 #### Menu props
 
 Custom props can be passed directly to `v-menu` using **menu-props** prop. In this example a scrim as added to the select and the menu closes when you scroll.