/* * Copyright 2020 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ // Portions of the code in this file are based on code from react. // Original licensing for the following can be found in the // NOTICE file in the root directory of this source tree. // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions import {chain, focusWithoutScrolling, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils'; import {disableTextSelection, restoreTextSelection} from './textSelection'; import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents} from '@react-types/shared'; import {PressResponderContext} from './context'; import {RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react'; export interface PressProps extends PressEvents { /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */ isPressed?: boolean, /** Whether the press events should be disabled. */ isDisabled?: boolean, /** Whether the target should not receive focus on press. */ preventFocusOnPress?: boolean, /** * Whether press events should be canceled when the pointer leaves the target while pressed. * By default, this is `false`, which means if the pointer returns back over the target while * still pressed, onPressStart will be fired again. If set to `true`, the press is canceled * when the pointer leaves the target and onPressStart will not be fired if the pointer returns. */ shouldCancelOnPointerExit?: boolean, /** Whether text selection should be enabled on the pressable element. */ allowTextSelectionOnPress?: boolean } export interface PressHookProps extends PressProps { /** A ref to the target element. */ ref?: RefObject } interface PressState { isPressed: boolean, ignoreEmulatedMouseEvents: boolean, ignoreClickAfterPress: boolean, didFirePressStart: boolean, isTriggeringEvent: boolean, activePointerId: any, target: FocusableElement | null, isOverTarget: boolean, pointerType: PointerType | null, userSelect?: string, metaKeyEvents?: Map } interface EventBase { currentTarget: EventTarget | null, shiftKey: boolean, ctrlKey: boolean, metaKey: boolean, altKey: boolean } export interface PressResult { /** Whether the target is currently pressed. */ isPressed: boolean, /** Props to spread on the target element. */ pressProps: DOMAttributes } function usePressResponderContext(props: PressHookProps): PressHookProps { // Consume context from and merge with props. let context = useContext(PressResponderContext); if (context) { let {register, ...contextProps} = context; props = mergeProps(contextProps, props) as PressHookProps; register(); } useSyncRef(context, props.ref); return props; } class PressEvent implements IPressEvent { type: IPressEvent['type']; pointerType: PointerType; target: Element; shiftKey: boolean; ctrlKey: boolean; metaKey: boolean; altKey: boolean; #shouldStopPropagation = true; constructor(type: IPressEvent['type'], pointerType: PointerType, originalEvent: EventBase) { this.type = type; this.pointerType = pointerType; this.target = originalEvent.currentTarget as Element; this.shiftKey = originalEvent.shiftKey; this.metaKey = originalEvent.metaKey; this.ctrlKey = originalEvent.ctrlKey; this.altKey = originalEvent.altKey; } continuePropagation() { this.#shouldStopPropagation = false; } get shouldStopPropagation() { return this.#shouldStopPropagation; } } const LINK_CLICKED = Symbol('linkClicked'); /** * Handles press interactions across mouse, touch, keyboard, and screen readers. * It normalizes behavior across browsers and platforms, and handles many nuances * of dealing with pointer and keyboard events. */ export function usePress(props: PressHookProps): PressResult { let { onPress, onPressChange, onPressStart, onPressEnd, onPressUp, isDisabled, isPressed: isPressedProp, preventFocusOnPress, shouldCancelOnPointerExit, allowTextSelectionOnPress, // eslint-disable-next-line @typescript-eslint/no-unused-vars ref: _, // Removing `ref` from `domProps` because TypeScript is dumb ...domProps } = usePressResponderContext(props); let [isPressed, setPressed] = useState(false); let ref = useRef({ isPressed: false, ignoreEmulatedMouseEvents: false, ignoreClickAfterPress: false, didFirePressStart: false, isTriggeringEvent: false, activePointerId: null, target: null, isOverTarget: false, pointerType: null }); let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners(); let triggerPressStart = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => { let state = ref.current; if (isDisabled || state.didFirePressStart) { return false; } let shouldStopPropagation = true; state.isTriggeringEvent = true; if (onPressStart) { let event = new PressEvent('pressstart', pointerType, originalEvent); onPressStart(event); shouldStopPropagation = event.shouldStopPropagation; } if (onPressChange) { onPressChange(true); } state.isTriggeringEvent = false; state.didFirePressStart = true; setPressed(true); return shouldStopPropagation; }); let triggerPressEnd = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => { let state = ref.current; if (!state.didFirePressStart) { return false; } state.ignoreClickAfterPress = true; state.didFirePressStart = false; state.isTriggeringEvent = true; let shouldStopPropagation = true; if (onPressEnd) { let event = new PressEvent('pressend', pointerType, originalEvent); onPressEnd(event); shouldStopPropagation = event.shouldStopPropagation; } if (onPressChange) { onPressChange(false); } setPressed(false); if (onPress && wasPressed && !isDisabled) { let event = new PressEvent('press', pointerType, originalEvent); onPress(event); shouldStopPropagation &&= event.shouldStopPropagation; } state.isTriggeringEvent = false; return shouldStopPropagation; }); let triggerPressUp = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => { let state = ref.current; if (isDisabled) { return false; } if (onPressUp) { state.isTriggeringEvent = true; let event = new PressEvent('pressup', pointerType, originalEvent); onPressUp(event); state.isTriggeringEvent = false; return event.shouldStopPropagation; } return true; }); let cancel = useEffectEvent((e: EventBase) => { let state = ref.current; if (state.isPressed && state.target) { if (state.isOverTarget && state.pointerType != null) { triggerPressEnd(createEvent(state.target, e), state.pointerType, false); } state.isPressed = false; state.isOverTarget = false; state.activePointerId = null; state.pointerType = null; removeAllGlobalListeners(); if (!allowTextSelectionOnPress) { restoreTextSelection(state.target); } } }); let cancelOnPointerExit = useEffectEvent((e: EventBase) => { if (shouldCancelOnPointerExit) { cancel(e); } }); let pressProps = useMemo(() => { let state = ref.current; let pressProps: DOMAttributes = { onKeyDown(e) { if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target as Element)) { if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) { e.preventDefault(); } // If the event is repeating, it may have started on a different element // after which focus moved to the current element. Ignore these events and // only handle the first key down event. let shouldStopPropagation = true; if (!state.isPressed && !e.repeat) { state.target = e.currentTarget; state.isPressed = true; shouldStopPropagation = triggerPressStart(e, 'keyboard'); // Focus may move before the key up event, so register the event on the document // instead of the same element where the key down event occurred. Make it capturing so that it will trigger // before stopPropagation from useKeyboard on a child element may happen and thus we can still call triggerPress for the parent element. let originalTarget = e.currentTarget; let pressUp = (e) => { if (isValidKeyboardEvent(e, originalTarget) && !e.repeat && originalTarget.contains(e.target as Element) && state.target) { triggerPressUp(createEvent(state.target, e), 'keyboard'); } }; addGlobalListener(getOwnerDocument(e.currentTarget), 'keyup', chain(pressUp, onKeyUp), true); } if (shouldStopPropagation) { e.stopPropagation(); } // Keep track of the keydown events that occur while the Meta (e.g. Command) key is held. // macOS has a bug where keyup events are not fired while the Meta key is down. // When the Meta key itself is released we will get an event for that, and we'll act as if // all of these other keys were released as well. // https://bugs.chromium.org/p/chromium/issues/detail?id=1393524 // https://bugs.webkit.org/show_bug.cgi?id=55291 // https://bugzilla.mozilla.org/show_bug.cgi?id=1299553 if (e.metaKey && isMac()) { state.metaKeyEvents?.set(e.key, e.nativeEvent); } } else if (e.key === 'Meta') { state.metaKeyEvents = new Map(); } }, onClick(e) { if (e && !e.currentTarget.contains(e.target as Element)) { return; } if (e && e.button === 0 && !state.isTriggeringEvent && !(openLink as any).isOpening) { let shouldStopPropagation = true; if (isDisabled) { e.preventDefault(); } // If triggered from a screen reader or by using element.click(), // trigger as if it were a keyboard click. if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && !state.isPressed && (state.pointerType === 'virtual' || isVirtualClick(e.nativeEvent))) { // Ensure the element receives focus (VoiceOver on iOS does not do this) if (!isDisabled && !preventFocusOnPress) { focusWithoutScrolling(e.currentTarget); } let stopPressStart = triggerPressStart(e, 'virtual'); let stopPressUp = triggerPressUp(e, 'virtual'); let stopPressEnd = triggerPressEnd(e, 'virtual'); shouldStopPropagation = stopPressStart && stopPressUp && stopPressEnd; } state.ignoreEmulatedMouseEvents = false; state.ignoreClickAfterPress = false; if (shouldStopPropagation) { e.stopPropagation(); } } } }; let onKeyUp = (e: KeyboardEvent) => { if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) { if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) { e.preventDefault(); } let target = e.target as Element; triggerPressEnd(createEvent(state.target, e), 'keyboard', state.target.contains(target)); removeAllGlobalListeners(); // If a link was triggered with a key other than Enter, open the URL ourselves. // This means the link has a role override, and the default browser behavior // only applies when using the Enter key. if (e.key !== 'Enter' && isHTMLAnchorLink(state.target) && state.target.contains(target) && !e[LINK_CLICKED]) { // Store a hidden property on the event so we only trigger link click once, // even if there are multiple usePress instances attached to the element. e[LINK_CLICKED] = true; openLink(state.target, e, false); } state.isPressed = false; state.metaKeyEvents?.delete(e.key); } else if (e.key === 'Meta' && state.metaKeyEvents?.size) { // If we recorded keydown events that occurred while the Meta key was pressed, // and those haven't received keyup events already, fire keyup events ourselves. // See comment above for more info about the macOS bug causing this. let events = state.metaKeyEvents; state.metaKeyEvents = undefined; for (let event of events.values()) { state.target?.dispatchEvent(new KeyboardEvent('keyup', event)); } } }; if (typeof PointerEvent !== 'undefined') { pressProps.onPointerDown = (e) => { // Only handle left clicks, and ignore events that bubbled through portals. if (e.button !== 0 || !e.currentTarget.contains(e.target as Element)) { return; } // iOS safari fires pointer events from VoiceOver with incorrect coordinates/target. // Ignore and let the onClick handler take care of it instead. // https://bugs.webkit.org/show_bug.cgi?id=222627 // https://bugs.webkit.org/show_bug.cgi?id=223202 if (isVirtualPointerEvent(e.nativeEvent)) { state.pointerType = 'virtual'; return; } // Due to browser inconsistencies, especially on mobile browsers, we prevent // default on pointer down and handle focusing the pressable element ourselves. if (shouldPreventDefault(e.currentTarget as Element)) { e.preventDefault(); } state.pointerType = e.pointerType; let shouldStopPropagation = true; if (!state.isPressed) { state.isPressed = true; state.isOverTarget = true; state.activePointerId = e.pointerId; state.target = e.currentTarget; if (!isDisabled && !preventFocusOnPress) { focusWithoutScrolling(e.currentTarget); } if (!allowTextSelectionOnPress) { disableTextSelection(state.target); } shouldStopPropagation = triggerPressStart(e, state.pointerType); addGlobalListener(getOwnerDocument(e.currentTarget), 'pointermove', onPointerMove, false); addGlobalListener(getOwnerDocument(e.currentTarget), 'pointerup', onPointerUp, false); addGlobalListener(getOwnerDocument(e.currentTarget), 'pointercancel', onPointerCancel, false); } if (shouldStopPropagation) { e.stopPropagation(); } }; pressProps.onMouseDown = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } if (e.button === 0) { // Chrome and Firefox on touch Windows devices require mouse down events // to be canceled in addition to pointer events, or an extra asynchronous // focus event will be fired. if (shouldPreventDefault(e.currentTarget as Element)) { e.preventDefault(); } e.stopPropagation(); } }; pressProps.onPointerUp = (e) => { // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown. if (!e.currentTarget.contains(e.target as Element) || state.pointerType === 'virtual') { return; } // Only handle left clicks // Safari on iOS sometimes fires pointerup events, even // when the touch isn't over the target, so double check. if (e.button === 0 && isOverTarget(e, e.currentTarget)) { triggerPressUp(e, state.pointerType || e.pointerType); } }; // Safari on iOS < 13.2 does not implement pointerenter/pointerleave events correctly. // Use pointer move events instead to implement our own hit testing. // See https://bugs.webkit.org/show_bug.cgi?id=199803 let onPointerMove = (e: PointerEvent) => { if (e.pointerId !== state.activePointerId) { return; } if (state.target && isOverTarget(e, state.target)) { if (!state.isOverTarget && state.pointerType != null) { state.isOverTarget = true; triggerPressStart(createEvent(state.target, e), state.pointerType); } } else if (state.target && state.isOverTarget && state.pointerType != null) { state.isOverTarget = false; triggerPressEnd(createEvent(state.target, e), state.pointerType, false); cancelOnPointerExit(e); } }; let onPointerUp = (e: PointerEvent) => { if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) { if (isOverTarget(e, state.target) && state.pointerType != null) { triggerPressEnd(createEvent(state.target, e), state.pointerType); } else if (state.isOverTarget && state.pointerType != null) { triggerPressEnd(createEvent(state.target, e), state.pointerType, false); } state.isPressed = false; state.isOverTarget = false; state.activePointerId = null; state.pointerType = null; removeAllGlobalListeners(); if (!allowTextSelectionOnPress) { restoreTextSelection(state.target); } } }; let onPointerCancel = (e: PointerEvent) => { cancel(e); }; pressProps.onDragStart = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do. cancel(e); }; } else { pressProps.onMouseDown = (e) => { // Only handle left clicks if (e.button !== 0 || !e.currentTarget.contains(e.target as Element)) { return; } // Due to browser inconsistencies, especially on mobile browsers, we prevent // default on mouse down and handle focusing the pressable element ourselves. if (shouldPreventDefault(e.currentTarget)) { e.preventDefault(); } if (state.ignoreEmulatedMouseEvents) { e.stopPropagation(); return; } state.isPressed = true; state.isOverTarget = true; state.target = e.currentTarget; state.pointerType = isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse'; if (!isDisabled && !preventFocusOnPress) { focusWithoutScrolling(e.currentTarget); } let shouldStopPropagation = triggerPressStart(e, state.pointerType); if (shouldStopPropagation) { e.stopPropagation(); } addGlobalListener(getOwnerDocument(e.currentTarget), 'mouseup', onMouseUp, false); }; pressProps.onMouseEnter = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } let shouldStopPropagation = true; if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) { state.isOverTarget = true; shouldStopPropagation = triggerPressStart(e, state.pointerType); } if (shouldStopPropagation) { e.stopPropagation(); } }; pressProps.onMouseLeave = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } let shouldStopPropagation = true; if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) { state.isOverTarget = false; shouldStopPropagation = triggerPressEnd(e, state.pointerType, false); cancelOnPointerExit(e); } if (shouldStopPropagation) { e.stopPropagation(); } }; pressProps.onMouseUp = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } if (!state.ignoreEmulatedMouseEvents && e.button === 0) { triggerPressUp(e, state.pointerType || 'mouse'); } }; let onMouseUp = (e: MouseEvent) => { // Only handle left clicks if (e.button !== 0) { return; } state.isPressed = false; removeAllGlobalListeners(); if (state.ignoreEmulatedMouseEvents) { state.ignoreEmulatedMouseEvents = false; return; } if (state.target && isOverTarget(e, state.target) && state.pointerType != null) { triggerPressEnd(createEvent(state.target, e), state.pointerType); } else if (state.target && state.isOverTarget && state.pointerType != null) { triggerPressEnd(createEvent(state.target, e), state.pointerType, false); } state.isOverTarget = false; }; pressProps.onTouchStart = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } let touch = getTouchFromEvent(e.nativeEvent); if (!touch) { return; } state.activePointerId = touch.identifier; state.ignoreEmulatedMouseEvents = true; state.isOverTarget = true; state.isPressed = true; state.target = e.currentTarget; state.pointerType = 'touch'; // Due to browser inconsistencies, especially on mobile browsers, we prevent default // on the emulated mouse event and handle focusing the pressable element ourselves. if (!isDisabled && !preventFocusOnPress) { focusWithoutScrolling(e.currentTarget); } if (!allowTextSelectionOnPress) { disableTextSelection(state.target); } let shouldStopPropagation = triggerPressStart(e, state.pointerType); if (shouldStopPropagation) { e.stopPropagation(); } addGlobalListener(getOwnerWindow(e.currentTarget), 'scroll', onScroll, true); }; pressProps.onTouchMove = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } if (!state.isPressed) { e.stopPropagation(); return; } let touch = getTouchById(e.nativeEvent, state.activePointerId); let shouldStopPropagation = true; if (touch && isOverTarget(touch, e.currentTarget)) { if (!state.isOverTarget && state.pointerType != null) { state.isOverTarget = true; shouldStopPropagation = triggerPressStart(e, state.pointerType); } } else if (state.isOverTarget && state.pointerType != null) { state.isOverTarget = false; shouldStopPropagation = triggerPressEnd(e, state.pointerType, false); cancelOnPointerExit(e); } if (shouldStopPropagation) { e.stopPropagation(); } }; pressProps.onTouchEnd = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } if (!state.isPressed) { e.stopPropagation(); return; } let touch = getTouchById(e.nativeEvent, state.activePointerId); let shouldStopPropagation = true; if (touch && isOverTarget(touch, e.currentTarget) && state.pointerType != null) { triggerPressUp(e, state.pointerType); shouldStopPropagation = triggerPressEnd(e, state.pointerType); } else if (state.isOverTarget && state.pointerType != null) { shouldStopPropagation = triggerPressEnd(e, state.pointerType, false); } if (shouldStopPropagation) { e.stopPropagation(); } state.isPressed = false; state.activePointerId = null; state.isOverTarget = false; state.ignoreEmulatedMouseEvents = true; if (state.target && !allowTextSelectionOnPress) { restoreTextSelection(state.target); } removeAllGlobalListeners(); }; pressProps.onTouchCancel = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } e.stopPropagation(); if (state.isPressed) { cancel(e); } }; let onScroll = (e: Event) => { if (state.isPressed && (e.target as Element).contains(state.target)) { cancel({ currentTarget: state.target, shiftKey: false, ctrlKey: false, metaKey: false, altKey: false }); } }; pressProps.onDragStart = (e) => { if (!e.currentTarget.contains(e.target as Element)) { return; } cancel(e); }; } return pressProps; }, [ addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners, allowTextSelectionOnPress, cancel, cancelOnPointerExit, triggerPressEnd, triggerPressStart, triggerPressUp ]); // Remove user-select: none in case component unmounts immediately after pressStart // eslint-disable-next-line arrow-body-style useEffect(() => { return () => { if (!allowTextSelectionOnPress) { // eslint-disable-next-line react-hooks/exhaustive-deps restoreTextSelection(ref.current.target ?? undefined); } }; }, [allowTextSelectionOnPress]); return { isPressed: isPressedProp || isPressed, pressProps: mergeProps(domProps, pressProps) }; } function isHTMLAnchorLink(target: Element): target is HTMLAnchorElement { return target.tagName === 'A' && target.hasAttribute('href'); } function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Element): boolean { const {key, code} = event; const element = currentTarget as HTMLElement; const role = element.getAttribute('role'); // Accessibility for keyboards. Space and Enter only. // "Spacebar" is for IE 11 return ( (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') && !((element instanceof getOwnerWindow(element).HTMLInputElement && !isValidInputKey(element, key)) || element instanceof getOwnerWindow(element).HTMLTextAreaElement || element.isContentEditable) && // Links should only trigger with Enter key !((role === 'link' || (!role && isHTMLAnchorLink(element))) && key !== 'Enter') ); } function getTouchFromEvent(event: TouchEvent): Touch | null { const {targetTouches} = event; if (targetTouches.length > 0) { return targetTouches[0]; } return null; } function getTouchById( event: TouchEvent, pointerId: null | number ): null | Touch { const changedTouches = event.changedTouches; for (let i = 0; i < changedTouches.length; i++) { const touch = changedTouches[i]; if (touch.identifier === pointerId) { return touch; } } return null; } function createEvent(target: FocusableElement, e: EventBase): EventBase { return { currentTarget: target, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey }; } interface Rect { top: number, right: number, bottom: number, left: number } interface EventPoint { clientX: number, clientY: number, width?: number, height?: number, radiusX?: number, radiusY?: number } function getPointClientRect(point: EventPoint): Rect { let offsetX = 0; let offsetY = 0; if (point.width !== undefined) { offsetX = (point.width / 2); } else if (point.radiusX !== undefined) { offsetX = point.radiusX; } if (point.height !== undefined) { offsetY = (point.height / 2); } else if (point.radiusY !== undefined) { offsetY = point.radiusY; } return { top: point.clientY - offsetY, right: point.clientX + offsetX, bottom: point.clientY + offsetY, left: point.clientX - offsetX }; } function areRectanglesOverlapping(a: Rect, b: Rect) { // check if they cannot overlap on x axis if (a.left > b.right || b.left > a.right) { return false; } // check if they cannot overlap on y axis if (a.top > b.bottom || b.top > a.bottom) { return false; } return true; } function isOverTarget(point: EventPoint, target: Element) { let rect = target.getBoundingClientRect(); let pointRect = getPointClientRect(point); return areRectanglesOverlapping(rect, pointRect); } function shouldPreventDefault(target: Element) { // We cannot prevent default if the target is a draggable element. return !(target instanceof HTMLElement) || !target.hasAttribute('draggable'); } function shouldPreventDefaultKeyboard(target: Element, key: string) { if (target instanceof HTMLInputElement) { return !isValidInputKey(target, key); } if (target instanceof HTMLButtonElement) { return target.type !== 'submit' && target.type !== 'reset'; } if (isHTMLAnchorLink(target)) { return false; } return true; } const nonTextInputTypes = new Set([ 'checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset' ]); function isValidInputKey(target: HTMLInputElement, key: string) { // Only space should toggle checkboxes and radios, not enter. return target.type === 'checkbox' || target.type === 'radio' ? key === ' ' : nonTextInputTypes.has(target.type); }