diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx index f2786a5ccd8..706bf17036f 100644 --- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx +++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx @@ -27,6 +27,7 @@ import { makeTransitionProps } from '@/composables/transition' // Utilities import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue' import { + checkPrintable, ensureValidVNode, genericComponent, IN_BROWSER, @@ -195,7 +196,7 @@ export const VAutocomplete = genericComponent() - const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef) + const listEvents = useScrolling(listRef, vTextFieldRef) function onClear (e: MouseEvent) { if (props.openOnClear) { menu.value = true @@ -217,6 +218,11 @@ export const VAutocomplete = genericComponent { slots['prepend-item']?.() } diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx index 62836a211d1..c94595b94c0 100644 --- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx +++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx @@ -28,6 +28,7 @@ import { makeTransitionProps } from '@/composables/transition' // Utilities import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue' import { + checkPrintable, ensureValidVNode, genericComponent, IN_BROWSER, @@ -246,7 +247,7 @@ export const VCombobox = genericComponent() - const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef) + const listEvents = useScrolling(listRef, vTextFieldRef) function onClear (e: MouseEvent) { cleared = true @@ -268,6 +269,11 @@ export const VCombobox = genericComponent { slots['prepend-item']?.() } diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx index a31744a18f4..7253ce04632 100644 --- a/packages/vuetify/src/components/VSelect/VSelect.tsx +++ b/packages/vuetify/src/components/VSelect/VSelect.tsx @@ -26,6 +26,7 @@ import { makeTransitionProps } from '@/composables/transition' // Utilities import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue' import { + checkPrintable, ensureValidVNode, genericComponent, IN_BROWSER, @@ -197,7 +198,7 @@ export const VSelect = genericComponent() - const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef) + const listEvents = useScrolling(listRef, vTextFieldRef) function onClear (e: MouseEvent) { if (props.openOnClear) { menu.value = true @@ -208,6 +209,11 @@ export const VSelect = genericComponent e.preventDefault() } onKeydown={ onListKeydown } onFocusin={ onFocusin } - onScrollPassive={ onListScroll } tabindex="-1" aria-live="polite" color={ props.itemColor ?? props.color } + { ...listEvents } { ...props.listProps } > { slots['prepend-item']?.() } diff --git a/packages/vuetify/src/components/VSelect/useScrolling.ts b/packages/vuetify/src/components/VSelect/useScrolling.ts index e6f5bb96dbe..05def0cc479 100644 --- a/packages/vuetify/src/components/VSelect/useScrolling.ts +++ b/packages/vuetify/src/components/VSelect/useScrolling.ts @@ -70,5 +70,8 @@ export function useScrolling (listRef: Ref, textFieldRef: Ref } } - return { onListScroll, onListKeydown } + return { + onScrollPassive: onListScroll, + onKeydown: onListKeydown, + } as Record // typescript doesn't know about vue's event merging } diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts index e9efebb2037..089e4ca8418 100644 --- a/packages/vuetify/src/util/helpers.ts +++ b/packages/vuetify/src/util/helpers.ts @@ -760,3 +760,9 @@ export function templateRef () { return fn as TemplateRef } + +export function checkPrintable (e: KeyboardEvent) { + const isPrintableChar = e.key.length === 1 + const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey + return isPrintableChar && noModifier +}