in src/focus-zone.ts [246:312]
function shouldIgnoreFocusHandling(keyboardEvent: KeyboardEvent, activeElement: Element | null) {
const key = keyboardEvent.key
// Get the number of characters in `key`, accounting for double-wide UTF-16 chars. If keyLength
// is 1, we can assume it's a "printable" character. Otherwise it's likely a control character.
// One exception is the Tab key, which is technically printable, but browsers generally assign
// its function to move focus rather than type a <TAB> character.
const keyLength = [...key].length
const isTextInput =
(activeElement instanceof HTMLInputElement && activeElement.type === 'text') ||
activeElement instanceof HTMLTextAreaElement
// If we would normally type a character into an input, ignore
// Also, Home and End keys should never affect focus when in a text input
if (isTextInput && (keyLength === 1 || key === 'Home' || key === 'End')) {
return true
}
// Some situations we want to ignore with <select> elements
if (activeElement instanceof HTMLSelectElement) {
// Regular typeable characters change the selection, so ignore those
if (keyLength === 1) {
return true
}
// On macOS, bare ArrowDown opens the select, so ignore that
if (key === 'ArrowDown' && isMacOS() && !keyboardEvent.metaKey) {
return true
}
// On other platforms, Alt+ArrowDown opens the select, so ignore that
if (key === 'ArrowDown' && !isMacOS() && keyboardEvent.altKey) {
return true
}
}
// Ignore page up and page down for textareas
if (activeElement instanceof HTMLTextAreaElement && (key === 'PageUp' || key === 'PageDown')) {
return true
}
if (isTextInput) {
const textInput = activeElement as HTMLInputElement | HTMLTextAreaElement
const cursorAtStart = textInput.selectionStart === 0 && textInput.selectionEnd === 0
const cursorAtEnd =
textInput.selectionStart === textInput.value.length && textInput.selectionEnd === textInput.value.length
// When in a text area or text input, only move focus left/right if at beginning/end of the field
if (key === 'ArrowLeft' && !cursorAtStart) {
return true
}
if (key === 'ArrowRight' && !cursorAtEnd) {
return true
}
// When in a text area, only move focus up/down if at beginning/end of the field
if (textInput instanceof HTMLTextAreaElement) {
if (key === 'ArrowUp' && !cursorAtStart) {
return true
}
if (key === 'ArrowDown' && !cursorAtEnd) {
return true
}
}
}
return false
}