diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index 6dcb3469218..2ebc52d200c 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -35,9 +35,7 @@ export interface AriaAutocompleteProps extends AutocompleteProps { export interface AriaAutocompleteOptions extends Omit { /** The ref for the wrapped collection element. */ - collectionRef: RefObject, - /** The ref for the wrapped input element. */ - inputRef: RefObject + collectionRef: RefObject } export interface AutocompleteAria { @@ -60,8 +58,7 @@ export interface AutocompleteAria { export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state: AutocompleteState): AutocompleteAria { let { collectionRef, - filter, - inputRef + filter } = props; let collectionId = useId(); @@ -150,8 +147,10 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state: state.setInputValue(value); }; + let keyDownTarget = useRef(null); // For textfield specific keydown operations let onKeyDown = (e: BaseEvent>) => { + keyDownTarget.current = e.target as Element; if (e.nativeEvent.isComposing) { return; } @@ -228,7 +227,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state: // Dispatch simulated key up events for things like triggering links in listbox // Make sure to stop the propagation of the input keyup event so that the simulated keyup/down pair // is detected by usePress instead of the original keyup originating from the input - if (e.target === inputRef.current) { + if (e.target === keyDownTarget.current) { e.stopImmediatePropagation(); if (state.focusedNodeId == null) { collectionRef.current?.dispatchEvent( @@ -248,7 +247,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state: return () => { document.removeEventListener('keyup', onKeyUpCapture, true); }; - }, [inputRef, onKeyUpCapture]); + }, [onKeyUpCapture]); let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/autocomplete'); let collectionProps = useLabels({ diff --git a/packages/@react-types/color/src/index.d.ts b/packages/@react-types/color/src/index.d.ts index 9112e35b81d..7350c51497d 100644 --- a/packages/@react-types/color/src/index.d.ts +++ b/packages/@react-types/color/src/index.d.ts @@ -118,14 +118,14 @@ export interface ColorFieldProps extends Omit, onChange?: (color: Color | null) => void } -export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit, AriaValidationProps { +export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit, AriaValidationProps { /** Enables or disables changing the value with scroll. */ isWheelDisabled?: boolean } export interface SpectrumColorFieldProps extends SpectrumTextInputBase, Omit, SpectrumFieldValidation, SpectrumLabelableProps, StyleProps { /** - * The color channel that this field edits. If not provided, + * The color channel that this field edits. If not provided, * the color is edited as a hex value. */ channel?: ColorChannel, @@ -160,7 +160,7 @@ export interface SpectrumColorWheelProps extends AriaColorWheelProps, Omit