Skip to content

Commit

Permalink
fix(VAutocomplete): allow searching when menu is focused
Browse files Browse the repository at this point in the history
fixes #17641
  • Loading branch information
KaelWD committed Jul 25, 2024
1 parent 6397324 commit b9ed79d
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 13 deletions.
10 changes: 8 additions & 2 deletions packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -195,7 +196,7 @@ export const VAutocomplete = genericComponent<new <
))

const listRef = ref<VList>()
const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef)
const listEvents = useScrolling(listRef, vTextFieldRef)
function onClear (e: MouseEvent) {
if (props.openOnClear) {
menu.value = true
Expand All @@ -217,6 +218,11 @@ export const VAutocomplete = genericComponent<new <
}
menu.value = !menu.value
}
function onListKeydown (e: KeyboardEvent) {
if (checkPrintable(e)) {
vTextFieldRef.value?.focus()
}
}
function onKeydown (e: KeyboardEvent) {
if (props.readonly || form?.isReadonly.value) return

Expand Down Expand Up @@ -472,10 +478,10 @@ export const VAutocomplete = genericComponent<new <
onKeydown={ onListKeydown }
onFocusin={ onFocusin }
onFocusout={ onFocusout }
onScrollPassive={ onListScroll }
tabindex="-1"
aria-live="polite"
color={ props.itemColor ?? props.color }
{ ...listEvents }
{ ...props.listProps }
>
{ slots['prepend-item']?.() }
Expand Down
10 changes: 8 additions & 2 deletions packages/vuetify/src/components/VCombobox/VCombobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -246,7 +247,7 @@ export const VCombobox = genericComponent<new <
))

const listRef = ref<VList>()
const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef)
const listEvents = useScrolling(listRef, vTextFieldRef)
function onClear (e: MouseEvent) {
cleared = true

Expand All @@ -268,6 +269,11 @@ export const VCombobox = genericComponent<new <
}
menu.value = !menu.value
}
function onListKeydown (e: KeyboardEvent) {
if (checkPrintable(e)) {
vTextFieldRef.value?.focus()
}
}
// eslint-disable-next-line complexity
function onKeydown (e: KeyboardEvent) {
if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return
Expand Down Expand Up @@ -516,10 +522,10 @@ export const VCombobox = genericComponent<new <
onKeydown={ onListKeydown }
onFocusin={ onFocusin }
onFocusout={ onFocusout }
onScrollPassive={ onListScroll }
tabindex="-1"
aria-live="polite"
color={ props.itemColor ?? props.color }
{ ...listEvents }
{ ...props.listProps }
>
{ slots['prepend-item']?.() }
Expand Down
16 changes: 8 additions & 8 deletions packages/vuetify/src/components/VSelect/VSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -197,7 +198,7 @@ export const VSelect = genericComponent<new <
})

const listRef = ref<VList>()
const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef)
const listEvents = useScrolling(listRef, vTextFieldRef)
function onClear (e: MouseEvent) {
if (props.openOnClear) {
menu.value = true
Expand All @@ -208,6 +209,11 @@ export const VSelect = genericComponent<new <

menu.value = !menu.value
}
function onListKeydown (e: KeyboardEvent) {
if (checkPrintable(e)) {
onKeydown(e)
}
}
function onKeydown (e: KeyboardEvent) {
if (!e.key || props.readonly || form?.isReadonly.value) return

Expand All @@ -232,12 +238,6 @@ export const VSelect = genericComponent<new <
// html select hotkeys
const KEYBOARD_LOOKUP_THRESHOLD = 1000 // milliseconds

function checkPrintable (e: KeyboardEvent) {
const isPrintableChar = e.key.length === 1
const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey
return isPrintableChar && noModifier
}

if (props.multiple || !checkPrintable(e)) return

const now = performance.now()
Expand Down Expand Up @@ -399,10 +399,10 @@ export const VSelect = genericComponent<new <
onMousedown={ (e: MouseEvent) => e.preventDefault() }
onKeydown={ onListKeydown }
onFocusin={ onFocusin }
onScrollPassive={ onListScroll }
tabindex="-1"
aria-live="polite"
color={ props.itemColor ?? props.color }
{ ...listEvents }
{ ...props.listProps }
>
{ slots['prepend-item']?.() }
Expand Down
5 changes: 4 additions & 1 deletion packages/vuetify/src/components/VSelect/useScrolling.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,5 +70,8 @@ export function useScrolling (listRef: Ref<VList | undefined>, textFieldRef: Ref
}
}

return { onListScroll, onListKeydown }
return {
onScrollPassive: onListScroll,
onKeydown: onListKeydown,
} as Record<string, Function> // typescript doesn't know about vue's event merging
}
6 changes: 6 additions & 0 deletions packages/vuetify/src/util/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

0 comments on commit b9ed79d

Please # to comment.