From 33d1c223373edbd7949f615e7796a278baa82ff4 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Wed, 8 Oct 2025 10:55:40 -0500 Subject: [PATCH 1/5] fix: autocomplete links not opening in new tab on meta key modifier --- packages/@react-aria/autocomplete/src/useAutocomplete.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index 313615d5977..31d04416776 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -13,7 +13,7 @@ import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared'; import {AriaTextFieldProps} from '@react-aria/textfield'; import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete'; -import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils'; +import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, openLink, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils'; import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus'; import {getInteractionModality} from '@react-aria/interactions'; // @ts-ignore @@ -311,7 +311,11 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Aut // Trigger click action on item when Enter key was pressed. if (focusedNodeId != null) { let item = document.getElementById(focusedNodeId); - item?.click(); + if (item instanceof HTMLAnchorElement && item.href) { + openLink(item, e.nativeEvent); + } else if (item) { + item.click(); + } } break; } From 6a7b241d77c95a8d9055dd0b0beba74cabb48744 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Fri, 10 Oct 2025 17:08:53 -0500 Subject: [PATCH 2/5] dispatch PointerEvent instead --- packages/@react-aria/autocomplete/src/useAutocomplete.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index 31d04416776..8eb9b2544a2 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -311,11 +311,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Aut // Trigger click action on item when Enter key was pressed. if (focusedNodeId != null) { let item = document.getElementById(focusedNodeId); - if (item instanceof HTMLAnchorElement && item.href) { - openLink(item, e.nativeEvent); - } else if (item) { - item.click(); - } + item?.dispatchEvent(new PointerEvent('click', e.nativeEvent)); } break; } From 08cf817e171449fa27d59f9df5cf2fafa65594b3 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Fri, 10 Oct 2025 17:12:37 -0500 Subject: [PATCH 3/5] lint --- packages/@react-aria/autocomplete/src/useAutocomplete.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index 8eb9b2544a2..2110caebeef 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -13,7 +13,7 @@ import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared'; import {AriaTextFieldProps} from '@react-aria/textfield'; import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete'; -import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, openLink, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils'; +import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils'; import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus'; import {getInteractionModality} from '@react-aria/interactions'; // @ts-ignore From f5afec70adbcf09683047614ded4657f6e1ad975 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Fri, 10 Oct 2025 17:33:53 -0500 Subject: [PATCH 4/5] fire Mouse event instead --- packages/@react-aria/autocomplete/src/useAutocomplete.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index 2110caebeef..c61e642f70e 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -311,7 +311,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Aut // Trigger click action on item when Enter key was pressed. if (focusedNodeId != null) { let item = document.getElementById(focusedNodeId); - item?.dispatchEvent(new PointerEvent('click', e.nativeEvent)); + item?.dispatchEvent(new MouseEvent('click', e.nativeEvent)); } break; } From 838b9ad75a3aa1b6efbec96d610ae54364b59f50 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Fri, 10 Oct 2025 18:22:09 -0500 Subject: [PATCH 5/5] use PointerEvent and fix test --- packages/@react-aria/autocomplete/src/useAutocomplete.ts | 2 +- .../react-aria-components/test/AriaAutocomplete.test-util.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts index c61e642f70e..2110caebeef 100644 --- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts +++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts @@ -311,7 +311,7 @@ export function useAutocomplete(props: AriaAutocompleteOptions, state: Aut // Trigger click action on item when Enter key was pressed. if (focusedNodeId != null) { let item = document.getElementById(focusedNodeId); - item?.dispatchEvent(new MouseEvent('click', e.nativeEvent)); + item?.dispatchEvent(new PointerEvent('click', e.nativeEvent)); } break; } diff --git a/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx b/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx index 2aa875ff396..a811e52c688 100644 --- a/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx +++ b/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx @@ -752,6 +752,7 @@ export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = ' if (renderers.links) { describe('with links', function () { + installPointerEvent(); it('should trigger the link option when hitting Enter', async function () { let {getByRole} = (renderers.links!)(); let input = getByRole('searchbox');