fix(VAutocomplete, VCombobox): space key should not select (#21311)

Co-authored-by: John Leider <[email protected]>

Author: J-Sek

packages/api-generator/src/locale/en/VList.json

@@ -3,6 +3,7 @@
     "itemType": "Designates the key on the supplied items that is used for determining the nodes type.",
     "activatable": "Designates whether the list items are activatable.",
     "disabled": "Puts all children inputs into a disabled state.",
+    "filterable": "**FOR INTERNAL USE ONLY** Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox.",
     "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler.",
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
     "link": "Applies `v-list-item` hover styles. Useful when using the item is an _activator_.",

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -207,7 +207,7 @@ export const VAutocomplete = genericComponent<new <
       menu.value = !menu.value
     }
     function onListKeydown (e: KeyboardEvent) {
-      if (e.key !== ' ' && checkPrintable(e)) {
+      if (checkPrintable(e) || e.key === 'Backspace') {
         vTextFieldRef.value?.focus()
       }
     }
@@ -467,6 +467,7 @@ export const VAutocomplete = genericComponent<new <
                   { hasList && (
                     <VList
                       ref={ listRef }
+                      filterable
                       selected={ selectedValues.value }
                       selectStrategy={ props.multiple ? 'independent' : 'single-independent' }
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -261,7 +261,7 @@ export const VCombobox = genericComponent<new <
       menu.value = !menu.value
     }
     function onListKeydown (e: KeyboardEvent) {
-      if (e.key !== ' ' && checkPrintable(e)) {
+      if (checkPrintable(e) || e.key === 'Backspace') {
         vTextFieldRef.value?.focus()
       }
     }
@@ -513,6 +513,7 @@ export const VCombobox = genericComponent<new <
                   { hasList && (
                     <VList
                       ref={ listRef }
+                      filterable
                       selected={ selectedValues.value }
                       selectStrategy={ props.multiple ? 'independent' : 'single-independent' }
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }

packages/vuetify/src/components/VList/VList.tsx

@@ -92,6 +92,7 @@ export const makeVListProps = propsFactory({
   activeClass: String,
   bgColor: String,
   disabled: Boolean,
+  filterable: Boolean,
   expandIcon: IconValue,
   collapseIcon: IconValue,
   lines: {
@@ -174,7 +175,9 @@ export const VList = genericComponent<new <
     const baseColor = toRef(() => props.baseColor)
     const color = toRef(() => props.color)
 
-    createList()
+    createList({
+      filterable: props.filterable,
+    })
 
     provideDefaults({
       VListGroup: {

packages/vuetify/src/components/VList/VListItem.tsx

@@ -28,7 +28,7 @@ import vRipple from '@/directives/ripple'
 
 // Utilities
 import { computed, onBeforeMount, toDisplayString, toRef, watch } from 'vue'
-import { deprecate, EventProp, genericComponent, propsFactory, useRender } from '@/util'
+import { deprecate, EventProp, genericComponent, keyCodes, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -179,6 +179,15 @@ export const VListItem = genericComponent<VListItemSlots>()({
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(roundedProps)
     const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined)
+    const rippleOptions = toRef(() =>
+      (
+        props.ripple !== undefined &&
+        !!props.ripple &&
+        list?.filterable
+      )
+        ? { keys: [keyCodes.enter] }
+        : props.ripple
+    )
 
     const slotProps = computed(() => ({
       isActive: isActive.value,
@@ -212,8 +221,9 @@ export const VListItem = genericComponent<VListItemSlots>()({
 
       if (['INPUT', 'TEXTAREA'].includes(target.tagName)) return
 
-      if (e.key === 'Enter' || e.key === ' ') {
+      if (e.key === 'Enter' || (e.key === ' ' && !list?.filterable)) {
         e.preventDefault()
+        e.stopPropagation()
         e.target!.dispatchEvent(new MouseEvent('click', e))
       }
     }
@@ -271,7 +281,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
           }
           onClick={ onClick }
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
-          v-ripple={ isClickable.value && props.ripple }
+          v-ripple={ isClickable.value && rippleOptions.value }
           { ...link.linkProps }
         >
           { genOverlays(isClickable.value || isActive.value, 'v-list-item') }

packages/vuetify/src/components/VList/list.ts

@@ -2,7 +2,7 @@
 import { computed, inject, provide, shallowRef } from 'vue'
 
 // Types
-import type { InjectionKey, Ref } from 'vue'
+import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
 
 // Depth
 export const DepthKey: InjectionKey<Ref<number>> = Symbol.for('vuetify:depth')
@@ -19,14 +19,24 @@ export function useDepth (hasPrepend?: Ref<boolean>) {
 
 // List
 export const ListKey: InjectionKey<{
+  filterable: MaybeRefOrGetter<boolean>
   hasPrepend: Ref<boolean>
   updateHasPrepend: (value: boolean) => void
 }> = Symbol.for('vuetify:list')
 
-export function createList () {
-  const parent = inject(ListKey, { hasPrepend: shallowRef(false), updateHasPrepend: () => null })
+type InjectedListOptions = {
+  filterable: MaybeRefOrGetter<boolean>
+}
+
+export function createList ({ filterable }: InjectedListOptions = { filterable: false }) {
+  const parent = inject(ListKey, {
+    filterable: false,
+    hasPrepend: shallowRef(false),
+    updateHasPrepend: () => null,
+  })
 
   const data = {
+    filterable: parent.filterable || filterable,
     hasPrepend: shallowRef(false),
     updateHasPrepend: (value: boolean) => {
       if (value) data.hasPrepend.value = value

packages/vuetify/src/directives/ripple/index.ts

@@ -25,7 +25,10 @@ interface RippleOptions {
 }
 
 export interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
-  value?: boolean | { class: string }
+  value?: boolean | {
+    class?: string
+    keys?: number[]
+  }
   modifiers: {
     center?: boolean
     circle?: boolean
@@ -157,7 +160,7 @@ const ripples = {
   },
 }
 
-function isRippleEnabled (value: any): value is true {
+function isRippleEnabled (value: any) {
   return typeof value === 'undefined' || !!value
 }
 
@@ -249,8 +252,8 @@ function rippleCancelShow (e: MouseEvent | TouchEvent) {
 
 let keyboardRipple = false
 
-function keyboardRippleShow (e: KeyboardEvent) {
-  if (!keyboardRipple && (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space)) {
+function keyboardRippleShow (e: KeyboardEvent, keys: number[]) {
+  if (!keyboardRipple && keys.includes(e.keyCode)) {
     keyboardRipple = true
     rippleShow(e)
   }
@@ -270,6 +273,7 @@ function focusRippleHide (e: FocusEvent) {
 
 function updateRipple (el: HTMLElement, binding: RippleDirectiveBinding, wasEnabled: boolean) {
   const { value, modifiers } = binding
+
   const enabled = isRippleEnabled(value)
   if (!enabled) {
     ripples.hide(el)
@@ -279,10 +283,15 @@ function updateRipple (el: HTMLElement, binding: RippleDirectiveBinding, wasEnab
   el._ripple.enabled = enabled
   el._ripple.centered = modifiers.center
   el._ripple.circle = modifiers.circle
-  if (isObject(value) && value.class) {
-    el._ripple.class = value.class
+
+  const bindingValue = isObject(value) ? value : {}
+  if (bindingValue.class) {
+    el._ripple.class = bindingValue.class
   }
 
+  const allowedKeys = bindingValue.keys ?? [keyCodes.enter, keyCodes.space]
+  el._ripple.keyDownHandler = (e: KeyboardEvent) => keyboardRippleShow(e, allowedKeys)
+
   if (enabled && !wasEnabled) {
     if (modifiers.stop) {
       el.addEventListener('touchstart', rippleStop, { passive: true })
@@ -299,7 +308,7 @@ function updateRipple (el: HTMLElement, binding: RippleDirectiveBinding, wasEnab
     el.addEventListener('mouseup', rippleHide)
     el.addEventListener('mouseleave', rippleHide)
 
-    el.addEventListener('keydown', keyboardRippleShow)
+    el.addEventListener('keydown', e => keyboardRippleShow(e, allowedKeys))
     el.addEventListener('keyup', keyboardRippleHide)
 
     el.addEventListener('blur', focusRippleHide)
@@ -319,7 +328,9 @@ function removeListeners (el: HTMLElement) {
   el.removeEventListener('touchcancel', rippleHide)
   el.removeEventListener('mouseup', rippleHide)
   el.removeEventListener('mouseleave', rippleHide)
-  el.removeEventListener('keydown', keyboardRippleShow)
+  if (el._ripple?.keyDownHandler) {
+    el.removeEventListener('keydown', el._ripple.keyDownHandler)
+  }
   el.removeEventListener('keyup', keyboardRippleHide)
   el.removeEventListener('dragstart', rippleHide)
   el.removeEventListener('blur', focusRippleHide)
@@ -330,8 +341,8 @@ function mounted (el: HTMLElement, binding: RippleDirectiveBinding) {
 }
 
 function unmounted (el: HTMLElement) {
-  delete el._ripple
   removeListeners(el)
+  delete el._ripple
 }
 
 function updated (el: HTMLElement, binding: RippleDirectiveBinding) {

packages/vuetify/src/globals.d.ts

@@ -24,6 +24,7 @@ declare global {
       isTouch?: boolean
       showTimer?: number
       showTimerCommit?: (() => void) | null
+      keyDownHandler?: ((e: KeyboardEvent) => void) | null
     }
     _observe?: Record<number, {
       init: boolean